@pingux/astro 1.27.0-alpha.3 → 1.27.0-alpha.5

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -58,6 +58,8 @@ var _overlays = require("@react-stately/overlays");
 
 var _overlays2 = require("@react-aria/overlays");
 
+var _utils = require("@react-aria/utils");
+
 var _ArrowDropUpIcon = _interopRequireDefault(require("mdi-react/ArrowDropUpIcon"));
 
 var _ArrowDropDownIcon = _interopRequireDefault(require("mdi-react/ArrowDropDownIcon"));
@@ -74,7 +76,7 @@ var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"];
+var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem", "popoverProps"];
 
 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); }
 
@@ -101,6 +103,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
       name = props.name,
       searchProps = props.searchProps,
       selectedItem = props.selectedItem,
+      popoverProps = props.popoverProps,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   var _useState = (0, _react.useState)(''),
@@ -267,7 +270,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
   }), selectedItem, (0, _react2.jsx)(_index.Icon, {
     icon: popoverState.isOpen ? _ArrowDropUpIcon["default"] : _ArrowDropDownIcon["default"]
-  })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, {
+  })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, (0, _utils.mergeProps)(overlayProps, positionProps, popoverProps), {
     ref: overlayRef,
     isOpen: popoverState.isOpen,
     scrollRef: scrollBoxRef,
@@ -355,6 +358,9 @@ EnvironmentBreadcrumb.propTypes = {
   /** Callback function that fires when the dropdown is closed. */
   onPopoverClose: _propTypes["default"].func,
 
+  /** Props object that is spread directly into the popover container component. */
+  popoverProps: _propTypes["default"].shape({}),
+
   /** Props object that is spread directly into the SearchField element. */
   searchProps: _propTypes["default"].shape({}),
 

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

@@ -2,10 +2,28 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
 var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -22,6 +40,10 @@ var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
+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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var testEnvBreadcrumb = 'test-env-breadcrumb';
 var testName = 'test-name';
 var testSelectedItem = 'test-selected-item';
@@ -52,6 +74,10 @@ var defaultProps = {
   },
   items: items
 };
+var popoverProps = {
+  maxWidth: '100px',
+  'data-testid': 'popover-container'
+};
 var defaultWithSectionsProps = {
   'data-testid': testEnvBreadcrumb,
   name: testName,
@@ -135,6 +161,15 @@ test('should display name', function () {
   getComponent();
   expect(_testWrapper.screen.getByText(testName)).toBeInTheDocument();
 });
+test('should spread props into popover container', function () {
+  getComponent(_objectSpread(_objectSpread({}, popoverProps), {}, {
+    isDefaultOpen: true
+  }));
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
+
+  expect(_testWrapper.screen.queryByTestId('popover-container')).toHaveStyle('max-width: 100px');
+});
 test('should display selectedItem', function () {
   getComponent();
   expect(_testWrapper.screen.getByText(testSelectedItem)).toBeInTheDocument();

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

@@ -137,6 +137,79 @@ var data = [{
     title: 'View a workflow'
   }]
 }];
+var sx = {
+  iconContainer: {
+    backgroundColor: 'accent.80',
+    alignItems: 'center',
+    justifyContent: 'center',
+    mr: 'sm',
+    borderRadius: '50%',
+    zIndex: 3
+  },
+  headingSeparator: {
+    flexGrow: 1,
+    backgroundColor: 'accent.80',
+    maxHeight: '100%',
+    width: '6px !important',
+    zIndex: 2,
+    m: '0px 5px 0px 17px !important'
+  },
+  title: {
+    fontSize: 'md',
+    color: 'accent.30',
+    lineHeight: '18px',
+    fontWeight: '3',
+    m: '12px 0px 28px 5px',
+    maxWidth: '195px'
+  },
+  linkRowIconButton: {
+    '&.is-pressed': {
+      backgroundColor: 'transparent'
+    },
+    '&.is-pressed > svg > path': {
+      fill: 'accent.30'
+    },
+    '&.is-hovered': {
+      backgroundColor: 'transparent'
+    }
+  },
+  linkRowIconSelected: {
+    zIndex: 3,
+    'path': {
+      fill: 'accent.30'
+    }
+  },
+  linkRowIconNotSelected: {
+    zIndex: 3,
+    'path': {
+      fill: 'accent.80'
+    }
+  },
+  linkRowSeparator: {
+    flexGrow: 1,
+    backgroundColor: 'accent.30',
+    maxHeight: '100%',
+    width: '1px !important',
+    zIndex: 2,
+    m: '-5px 5px -5px 11.5px !important'
+  },
+  linkRowText: {
+    fontSize: 'md',
+    color: '#163CE3',
+    lineHeight: '18px',
+    fontWeight: '0',
+    m: '3px 0px 20px 10px',
+    maxWidth: '140px'
+  },
+  container: {
+    p: '15px 15px 0px 15px',
+    width: '280px',
+    backgroundColor: 'accent.95',
+    borderRadius: '8px',
+    zIndex: 1,
+    boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
+  }
+};
 
 var Stage = function Stage(props) {
   var title = props.title,
@@ -172,14 +245,7 @@ var Stage = function Stage(props) {
   }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
     minWidth: "39.5px",
     minHeight: "39.5px",
-    sx: {
-      backgroundColor: 'accent.80',
-      alignItems: 'center',
-      justifyContent: 'center',
-      mr: '10px',
-      borderRadius: '50%',
-      zIndex: 3
-    }
+    sx: sx.iconContainer
   }, (0, _react2.jsx)(_index.Icon, {
     icon: icon,
     color: "accent.40",
@@ -188,24 +254,10 @@ var Stage = function Stage(props) {
       zIndex: 3
     }
   })), !isLastStage && (0, _react2.jsx)(_index.Separator, {
-    sx: {
-      flexGrow: 1,
-      backgroundColor: 'accent.80',
-      maxHeight: '100%',
-      width: '6px !important',
-      zIndex: 2,
-      m: '0px 5px 0px 17px !important'
-    },
+    sx: sx.headingSeparator,
     orientation: "vertical"
   })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: '15px',
-      color: 'accent.30',
-      lineHeight: '18px',
-      fontWeight: '3',
-      m: '12px 0px 28px 5px',
-      maxWidth: '195px'
-    }
+    sx: sx.title
   }, title), (0, _react2.jsx)(_index.Box, {
     pl: "0px",
     mb: "25px"
@@ -246,53 +298,19 @@ var LinkRow = function LinkRow(props) {
     }
   }, (0, _react2.jsx)(_index.IconButton, {
     onPress: onIconPress,
-    sx: {
-      '&.is-pressed': {
-        backgroundColor: 'transparent'
-      },
-      '&.is-pressed > svg > path': {
-        fill: 'accent.30'
-      },
-      '&.is-hovered': {
-        backgroundColor: 'transparent'
-      }
-    },
+    sx: sx.linkRowIconButton,
     "aria-label": "completed step icon indicator"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isSelected ? _CheckCircleIcon["default"] : RadioButtonIcon,
     size: isSelected ? '20px' : '18px',
-    sx: isSelected ? {
-      zIndex: 3,
-      'path': {
-        fill: 'accent.30'
-      }
-    } : {
-      zIndex: 3,
-      'path': {
-        fill: 'accent.80'
-      }
-    }
+    sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
   }))), !isLastLink && isLinkSelected && (0, _react2.jsx)(_index.Separator, {
-    sx: {
-      flexGrow: 1,
-      backgroundColor: 'accent.30',
-      maxHeight: '100%',
-      width: '1px !important',
-      zIndex: 2,
-      m: '-5px 5px -5px 11.5px !important'
-    },
+    sx: sx.linkRowSeparator,
     orientation: "vertical"
   })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, {
     href: "https://www.pingidentity.com",
     target: "_blank",
-    sx: {
-      fontSize: '15px',
-      color: '#163CE3',
-      lineHeight: '18px',
-      fontWeight: '0',
-      m: '3px 0px 20px 10px',
-      maxWidth: '140px'
-    }
+    sx: sx.linkRowText
   }, title)));
 };
 
@@ -300,16 +318,7 @@ var Default = function Default() {
   // Open the `Story` addons tab to view the source code for full context.
   return (0, _react2.jsx)(_index.Box, {
     as: "nav",
-    backgroundColor: "accent.95",
-    width: "280px",
-    sx: {
-      p: '15px 15px 0px 15px',
-      width: '280px',
-      backgroundColor: 'accent.95',
-      borderRadius: '8px',
-      zIndex: 1,
-      boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
-    }
+    sx: sx.container
   }, (0, _react2.jsx)(_index.Box, {
     paddingLeft: "0px"
   }, (0, _map["default"])(data).call(data, function (stage, index) {

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -12,7 +12,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"];
+var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem", "popoverProps"];
 
 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; }
 
@@ -25,6 +25,7 @@ import HomeIcon from 'mdi-react/HomeIcon';
 import PropTypes from 'prop-types';
 import { useOverlayTriggerState } from '@react-stately/overlays';
 import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
+import { mergeProps } from '@react-aria/utils';
 import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
 import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
 import { FocusScope } from '@react-aria/focus';
@@ -51,6 +52,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
       name = props.name,
       searchProps = props.searchProps,
       selectedItem = props.selectedItem,
+      popoverProps = props.popoverProps,
       others = _objectWithoutProperties(props, _excluded);
 
   var _useState = useState(''),
@@ -215,7 +217,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
   }), selectedItem, ___EmotionJSX(Icon, {
     icon: popoverState.isOpen ? ArrowDropUpIcon : ArrowDropDownIcon
-  })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, {
+  })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, mergeProps(overlayProps, positionProps, popoverProps), {
     ref: overlayRef,
     isOpen: popoverState.isOpen,
     scrollRef: scrollBoxRef,
@@ -303,6 +305,9 @@ EnvironmentBreadcrumb.propTypes = {
   /** Callback function that fires when the dropdown is closed. */
   onPopoverClose: PropTypes.func,
 
+  /** Props object that is spread directly into the popover container component. */
+  popoverProps: PropTypes.shape({}),
+
   /** Props object that is spread directly into the SearchField element. */
   searchProps: PropTypes.shape({}),
 

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js

@@ -1,6 +1,20 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+
+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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { Section } from '@react-stately/collections';
@@ -38,6 +52,10 @@ var defaultProps = {
   },
   items: items
 };
+var popoverProps = {
+  maxWidth: '100px',
+  'data-testid': 'popover-container'
+};
 var defaultWithSectionsProps = {
   'data-testid': testEnvBreadcrumb,
   name: testName,
@@ -115,6 +133,13 @@ test('should display name', function () {
   getComponent();
   expect(screen.getByText(testName)).toBeInTheDocument();
 });
+test('should spread props into popover container', function () {
+  getComponent(_objectSpread(_objectSpread({}, popoverProps), {}, {
+    isDefaultOpen: true
+  }));
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(screen.queryByTestId('popover-container')).toHaveStyle('max-width: 100px');
+});
 test('should display selectedItem', function () {
   getComponent();
   expect(screen.getByText(testSelectedItem)).toBeInTheDocument();

package/lib/recipes/TrialExperienceStatusBar.stories.js

@@ -104,6 +104,79 @@ var data = [{
     title: 'View a workflow'
   }]
 }];
+var sx = {
+  iconContainer: {
+    backgroundColor: 'accent.80',
+    alignItems: 'center',
+    justifyContent: 'center',
+    mr: 'sm',
+    borderRadius: '50%',
+    zIndex: 3
+  },
+  headingSeparator: {
+    flexGrow: 1,
+    backgroundColor: 'accent.80',
+    maxHeight: '100%',
+    width: '6px !important',
+    zIndex: 2,
+    m: '0px 5px 0px 17px !important'
+  },
+  title: {
+    fontSize: 'md',
+    color: 'accent.30',
+    lineHeight: '18px',
+    fontWeight: '3',
+    m: '12px 0px 28px 5px',
+    maxWidth: '195px'
+  },
+  linkRowIconButton: {
+    '&.is-pressed': {
+      backgroundColor: 'transparent'
+    },
+    '&.is-pressed > svg > path': {
+      fill: 'accent.30'
+    },
+    '&.is-hovered': {
+      backgroundColor: 'transparent'
+    }
+  },
+  linkRowIconSelected: {
+    zIndex: 3,
+    'path': {
+      fill: 'accent.30'
+    }
+  },
+  linkRowIconNotSelected: {
+    zIndex: 3,
+    'path': {
+      fill: 'accent.80'
+    }
+  },
+  linkRowSeparator: {
+    flexGrow: 1,
+    backgroundColor: 'accent.30',
+    maxHeight: '100%',
+    width: '1px !important',
+    zIndex: 2,
+    m: '-5px 5px -5px 11.5px !important'
+  },
+  linkRowText: {
+    fontSize: 'md',
+    color: '#163CE3',
+    lineHeight: '18px',
+    fontWeight: '0',
+    m: '3px 0px 20px 10px',
+    maxWidth: '140px'
+  },
+  container: {
+    p: '15px 15px 0px 15px',
+    width: '280px',
+    backgroundColor: 'accent.95',
+    borderRadius: '8px',
+    zIndex: 1,
+    boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
+  }
+};
 
 var Stage = function Stage(props) {
   var title = props.title,
@@ -139,14 +212,7 @@ var Stage = function Stage(props) {
   }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
     minWidth: "39.5px",
     minHeight: "39.5px",
-    sx: {
-      backgroundColor: 'accent.80',
-      alignItems: 'center',
-      justifyContent: 'center',
-      mr: '10px',
-      borderRadius: '50%',
-      zIndex: 3
-    }
+    sx: sx.iconContainer
   }, ___EmotionJSX(Icon, {
     icon: icon,
     color: "accent.40",
@@ -155,24 +221,10 @@ var Stage = function Stage(props) {
       zIndex: 3
     }
   })), !isLastStage && ___EmotionJSX(Separator, {
-    sx: {
-      flexGrow: 1,
-      backgroundColor: 'accent.80',
-      maxHeight: '100%',
-      width: '6px !important',
-      zIndex: 2,
-      m: '0px 5px 0px 17px !important'
-    },
+    sx: sx.headingSeparator,
     orientation: "vertical"
   })), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
-    sx: {
-      fontSize: '15px',
-      color: 'accent.30',
-      lineHeight: '18px',
-      fontWeight: '3',
-      m: '12px 0px 28px 5px',
-      maxWidth: '195px'
-    }
+    sx: sx.title
   }, title), ___EmotionJSX(Box, {
     pl: "0px",
     mb: "25px"
@@ -213,53 +265,19 @@ var LinkRow = function LinkRow(props) {
     }
   }, ___EmotionJSX(IconButton, {
     onPress: onIconPress,
-    sx: {
-      '&.is-pressed': {
-        backgroundColor: 'transparent'
-      },
-      '&.is-pressed > svg > path': {
-        fill: 'accent.30'
-      },
-      '&.is-hovered': {
-        backgroundColor: 'transparent'
-      }
-    },
+    sx: sx.linkRowIconButton,
     "aria-label": "completed step icon indicator"
   }, ___EmotionJSX(Icon, {
     icon: isSelected ? CheckCircleIcon : RadioButtonIcon,
     size: isSelected ? '20px' : '18px',
-    sx: isSelected ? {
-      zIndex: 3,
-      'path': {
-        fill: 'accent.30'
-      }
-    } : {
-      zIndex: 3,
-      'path': {
-        fill: 'accent.80'
-      }
-    }
+    sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
   }))), !isLastLink && isLinkSelected && ___EmotionJSX(Separator, {
-    sx: {
-      flexGrow: 1,
-      backgroundColor: 'accent.30',
-      maxHeight: '100%',
-      width: '1px !important',
-      zIndex: 2,
-      m: '-5px 5px -5px 11.5px !important'
-    },
+    sx: sx.linkRowSeparator,
     orientation: "vertical"
   })), ___EmotionJSX(Box, null, ___EmotionJSX(Link, {
     href: "https://www.pingidentity.com",
     target: "_blank",
-    sx: {
-      fontSize: '15px',
-      color: '#163CE3',
-      lineHeight: '18px',
-      fontWeight: '0',
-      m: '3px 0px 20px 10px',
-      maxWidth: '140px'
-    }
+    sx: sx.linkRowText
   }, title)));
 };
 
@@ -267,16 +285,7 @@ export var Default = function Default() {
   // Open the `Story` addons tab to view the source code for full context.
   return ___EmotionJSX(Box, {
     as: "nav",
-    backgroundColor: "accent.95",
-    width: "280px",
-    sx: {
-      p: '15px 15px 0px 15px',
-      width: '280px',
-      backgroundColor: 'accent.95',
-      borderRadius: '8px',
-      zIndex: 1,
-      boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
-    }
+    sx: sx.container
   }, ___EmotionJSX(Box, {
     paddingLeft: "0px"
   }, _mapInstanceProperty(data).call(data, function (stage, index) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.27.0-alpha.3",
+  "version": "1.27.0-alpha.5",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",