@pingux/astro 2.27.1-alpha.0 → 2.28.0-alpha.0

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

@@ -16,6 +16,7 @@ exports["default"] = exports.Edit = exports.DisplaySectionHeader = exports.Displ
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
 var _TrashIcon = _interopRequireDefault(require("@pingux/mdi-react/TrashIcon"));
 var _index = require("../index");
 var _figmaLinks = require("../utils/designUtils/figmaLinks.js");
@@ -210,7 +211,8 @@ var Edit = function Edit() {
     "aria-label": "deleteButton",
     sx: {
       alignSelf: 'center'
-    }
+    },
+    ml: "sm"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _TrashIcon["default"],
     sx: {
@@ -230,8 +232,8 @@ var Edit = function Edit() {
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",
-    mb: "sm",
-    pr: "37px"
+    mb: "md",
+    pr: "42px"
   }, (0, _react2.jsx)(_index.RockerButtonGroup, {
     mr: "sm",
     defaultSelectedKey: "all"
@@ -260,13 +262,18 @@ var Edit = function Edit() {
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.defaultText
   }, "NONE"))), (0, _react2.jsx)(_index.Text, null, ofTheConditionsAreTrueCopy), (0, _react2.jsx)(_index.Button, {
-    variant: "inline",
-    width: "fit-content",
-    role: "button",
-    title: "Add Field Button",
     ml: "auto",
+    variant: "inlineWithIcon",
+    title: "Add Field Button",
     "aria-label": "add"
-  }, "+ Add")), (0, _map["default"])(allConditions).call(allConditions, function (item) {
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    mr: "xs",
+    size: 15,
+    title: {
+      name: 'Add Icon'
+    }
+  }), "Add")), (0, _map["default"])(allConditions).call(allConditions, function (item) {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
       alignItems: "center",
@@ -286,12 +293,18 @@ var Edit = function Edit() {
           }
         }
       },
+      labelProps: {
+        mb: 0
+      },
       "aria-label": "temp-label"
     }), (0, _react2.jsx)(_index.SelectField, {
       hasNoStatusIndicator: true,
       selectedKey: "Equals",
       mr: "md",
       "aria-label": "temp-label",
+      labelProps: {
+        mb: 0
+      },
       width: "125px"
     }, (0, _react2.jsx)(_index.Item, {
       key: "Equals",
@@ -305,8 +318,10 @@ var Edit = function Edit() {
       hasNoStatusIndicator: true,
       width: "44%",
       value: item.field3,
-      mr: "xs",
-      "aria-label": "temp-label"
+      "aria-label": "temp-label",
+      labelProps: {
+        mb: 0
+      }
     })), trashButton);
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true
@@ -316,13 +331,14 @@ var Edit = function Edit() {
       '&::after': {
         bg: 'decorative.4',
         width: '2px'
-      }
+      },
+      p: 'md'
     })
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",
-    mb: "sm",
-    pr: "37px"
+    mb: "md",
+    pr: "42px"
   }, (0, _react2.jsx)(_index.RockerButtonGroup, {
     mr: "sm",
     defaultSelectedKey: "any"
@@ -351,19 +367,22 @@ var Edit = function Edit() {
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.defaultText
   }, "NONE"))), (0, _react2.jsx)(_index.Text, null, ofTheConditionsAreTrueCopy), (0, _react2.jsx)(_index.Button, {
-    variant: "inline",
-    width: "fit-content",
-    role: "button",
-    title: "Add Field Button",
     ml: "auto",
+    variant: "inlineWithIcon",
+    title: "Add Field Button",
     "aria-label": "add"
-  }, "+ Add")), (0, _react2.jsx)(_index.Box, {
-    ml: "lg"
-  }, (0, _map["default"])(anyConditions).call(anyConditions, function (item) {
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    mr: "xs",
+    size: 15,
+    title: {
+      name: 'Add Icon'
+    }
+  }), "Add")), (0, _react2.jsx)(_index.Box, null, (0, _map["default"])(anyConditions).call(anyConditions, function (item, index) {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
       alignItems: "center",
-      mb: "md",
+      mb: index + 1 === anyConditions.length ? 0 : 'md',
       key: item.key
     }, (0, _react2.jsx)(_index.Box, {
       isRow: true,
@@ -379,13 +398,19 @@ var Edit = function Edit() {
             bg: 'decorative.7'
           }
         }
+      },
+      labelProps: {
+        mb: 0
       }
     }), (0, _react2.jsx)(_index.SelectField, {
       "aria-label": "temp-label",
       hasNoStatusIndicator: true,
       selectedKey: "Equals",
       mr: "md",
-      width: "125px"
+      width: "125px",
+      labelProps: {
+        mb: 0
+      }
     }, (0, _react2.jsx)(_index.Item, {
       key: "Equals",
       textValue: "Equals",
@@ -399,7 +424,9 @@ var Edit = function Edit() {
       hasNoStatusIndicator: true,
       value: item.field3,
       width: "44%",
-      mr: "xs"
+      labelProps: {
+        mb: 0
+      }
     })), trashButton);
   }))), (0, _react2.jsx)(_index.Box, {
     alignSelf: "start"
@@ -412,13 +439,14 @@ var Edit = function Edit() {
       '&::after': {
         bg: 'decorative.4',
         width: '2px'
-      }
+      },
+      p: 'md'
     })
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",
-    mb: "sm",
-    pr: "37px"
+    mb: "md",
+    pr: "42px"
   }, (0, _react2.jsx)(_index.RockerButtonGroup, {
     mr: "sm",
     defaultSelectedKey: "none"
@@ -447,19 +475,22 @@ var Edit = function Edit() {
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.defaultText
   }, "NONE"))), (0, _react2.jsx)(_index.Text, null, ofTheConditionsAreTrueCopy), (0, _react2.jsx)(_index.Button, {
-    variant: "inline",
-    width: "fit-content",
-    role: "button",
-    title: "Add Field Button",
     ml: "auto",
+    variant: "inlineWithIcon",
+    title: "Add Field Button",
     "aria-label": "add"
-  }, "+ Add")), (0, _react2.jsx)(_index.Box, {
-    ml: "lg"
-  }, (0, _map["default"])(noneConditions).call(noneConditions, function (item) {
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    mr: "xs",
+    size: 15,
+    title: {
+      name: 'Add Icon'
+    }
+  }), "Add")), (0, _react2.jsx)(_index.Box, null, (0, _map["default"])(noneConditions).call(noneConditions, function (item, index) {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
       alignItems: "center",
-      mb: "md",
+      mb: index + 1 === anyConditions.length ? 0 : 'md',
       key: item.key
     }, (0, _react2.jsx)(_index.Box, {
       isRow: true,
@@ -475,13 +506,19 @@ var Edit = function Edit() {
             bg: 'accent.20'
           }
         }
+      },
+      labelProps: {
+        mb: 0
       }
     }), (0, _react2.jsx)(_index.SelectField, {
       "aria-label": "temp-label",
       hasNoStatusIndicator: true,
       selectedKey: "Equals",
       mr: "md",
-      width: "125px"
+      width: "125px",
+      labelProps: {
+        mb: 0
+      }
     }, (0, _react2.jsx)(_index.Item, {
       key: "Equals",
       textValue: "Equals",
@@ -493,9 +530,11 @@ var Edit = function Edit() {
     }, "Not Equal")), (0, _react2.jsx)(_index.TextField, {
       "aria-label": "temp-label",
       hasNoStatusIndicator: true,
+      labelProps: {
+        mb: 0
+      },
       value: item.field3,
-      width: "44%",
-      mr: "xs"
+      width: "44%"
     })), trashButton);
   }))), (0, _react2.jsx)(_index.Box, {
     alignSelf: "start"

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

@@ -1,35 +1,24 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Default = void 0;
-var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _CheckCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCircleIcon"));
 var _index = require("../index");
+var _figmaLinks = require("../utils/designUtils/figmaLinks.js");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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 = _filterInstanceProperty2(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 _default = {
   title: 'Recipes/Trial Experience Nav'
 };
@@ -79,36 +68,53 @@ var EarthCircleIcon = function EarthCircleIcon() {
 };
 var RadioButtonIcon = function RadioButtonIcon(props) {
   return (0, _react2.jsx)("svg", (0, _extends2["default"])({
-    "data-name": "Layer 1",
+    viewBox: "0 0 22 22",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 17.5 17.5",
     "aria-labelledby": "radio-button-icon-title"
   }, props), (0, _react2.jsx)("title", {
     id: "radio-button-icon-title"
   }, "Radio Button Icon"), (0, _react2.jsx)("path", {
-    className: "cls-1",
-    fill: "#B3BEE8",
-    d: "M9,18.25A8.75,8.75,0,1,1,17.75,9.5,8.76,8.76,0,0,1,9,18.25ZM9,1.75A7.75,7.75,0,1,0,16.75,9.5,7.76,7.76,0,0,0,9,1.75Z",
-    transform: "translate(-0.25 -0.75)"
+    d: "M11 18.3333C9.05508 18.3333 7.18982 17.5607 5.81455 16.1854C4.43928 14.8102 3.66667 12.9449 3.66667 11C3.66667 9.05507 4.43928 7.18981 5.81455 5.81455C7.18982 4.43928 9.05508 3.66666 11 3.66666C12.9449 3.66666 14.8102 4.43928 16.1854 5.81455C17.5607 7.18981 18.3333 9.05507 18.3333 11C18.3333 12.9449 17.5607 14.8102 16.1854 16.1854C14.8102 17.5607 12.9449 18.3333 11 18.3333ZM11 1.83333C9.79621 1.83333 8.60422 2.07043 7.49207 2.5311C6.37992 2.99177 5.36939 3.66698 4.51819 4.51818C2.7991 6.23727 1.83333 8.56884 1.83333 11C1.83333 13.4311 2.7991 15.7627 4.51819 17.4818C5.36939 18.333 6.37992 19.0082 7.49207 19.4689C8.60422 19.9296 9.79621 20.1667 11 20.1667C13.4311 20.1667 15.7627 19.2009 17.4818 17.4818C19.2009 15.7627 20.1667 13.4311 20.1667 11C20.1667 9.79621 19.9296 8.60421 19.4689 7.49206C19.0082 6.37991 18.333 5.36939 17.4818 4.51818C16.6306 3.66698 15.6201 2.99177 14.5079 2.5311C13.3958 2.07043 12.2038 1.83333 11 1.83333Z",
+    fill: "#B3BEE8"
   }), (0, _react2.jsx)("circle", {
-    className: "cls-2",
-    cx: "8.75",
-    cy: "8.75",
-    r: "8.05",
+    cx: "11",
+    cy: "11",
+    r: "8",
     fill: "white"
   }));
 };
+var IntegrateYourAppIcon = function IntegrateYourAppIcon(props) {
+  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": "integrate-your-app-icon-title"
+  }, props), (0, _react2.jsx)("title", {
+    id: "integrate-your-app-icon-title"
+  }, "Integrate Your App Icon"), (0, _react2.jsx)("path", {
+    d: "M2 5H5V8H2V5ZM8.98124 9.18922C8.40906 8.51487 7.5878 8 6 8V5C8.4122 5 10.0909 5.86013 11.2688 7.24828C12.3198 8.48703 12.8987 10.0806 13.3691 11.3758L13.4097 11.4874C13.9318 12.9231 14.3502 14.0229 15.0188 14.8108C15.5909 15.4851 16.4122 16 18 16V19H6V16H11.0563C10.9745 15.8905 10.8976 15.7846 10.8245 15.6841L10.7869 15.6323C10.2778 14.9323 9.93844 14.4905 9.36346 14.1517C8.79448 13.8164 7.83564 13.5 6 13.5V10.5C7.7039 10.5 9.02155 10.73 10.0813 11.1674C9.7558 10.3671 9.42315 9.71004 8.98124 9.18922ZM5 10.5H2V13.5H5V10.5ZM2 16H5V19H2V16ZM22 16H19V19H22V16Z",
+    fill: "#FF8324"
+  }));
+};
 var data = [{
   title: 'Design a Solution',
   icon: ArtIcon,
   iconTitle: 'Art Icon',
   key: 0,
   links: [{
+    isLinkSelected: true,
     title: 'Registration'
   }, {
+    isLinkSelected: true,
     title: 'Authentication'
   }, {
+    isLinkSelected: true,
     title: 'Profile management'
+  }, {
+    title: 'Account recovery'
   }, {
     title: 'Experience your solution'
   }]
@@ -132,6 +138,9 @@ var data = [{
   iconTitle: 'Earth Circle Icon',
   key: 2,
   links: [{
+    customIcon: IntegrateYourAppIcon,
+    title: 'Integrate your app'
+  }, {
     title: 'Learn about DaVinci'
   }, {
     title: 'View a workflow'
@@ -144,7 +153,11 @@ var sx = {
     justifyContent: 'center',
     mr: 'sm',
     borderRadius: '50%',
-    zIndex: 3
+    zIndex: 3,
+    '& > svg ': {
+      width: '28px',
+      height: '28px'
+    }
   },
   headingSeparator: {
     flexGrow: 1,
@@ -159,7 +172,7 @@ var sx = {
     color: 'accent.30',
     lineHeight: '18px',
     fontWeight: '3',
-    m: '12px 0px 28px 5px',
+    m: '12px 0px 28px 0px',
     maxWidth: '195px'
   },
   linkRowIconButton: {
@@ -187,19 +200,12 @@ var sx = {
       fill: 'accent.80'
     }
   },
-  linkRowSeparator: {
-    flexGrow: 1,
-    backgroundColor: 'accent.30',
-    width: '1px !important',
-    zIndex: 2,
-    m: '-4px 5px -5px 11.5px !important'
-  },
   linkRowText: {
     fontSize: 'md',
     color: '#163CE3',
     lineHeight: '18px',
     fontWeight: '0',
-    m: '3px 0px 20px 10px',
+    m: '3px 0px 15px 10px',
     maxWidth: '140px'
   },
   container: {
@@ -217,26 +223,11 @@ var Stage = function Stage(_ref) {
     iconTitle = _ref.iconTitle,
     links = _ref.links,
     isLastStage = _ref.isLastStage;
-  var _useState = (0, _react.useState)([]),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    selectedLinks = _useState2[0],
-    updateSelectedLinks = _useState2[1];
-  var onSelectionChange = function onSelectionChange(thisIndex) {
-    var _context2;
-    var newArray = [];
-    if ((0, _includes["default"])(selectedLinks).call(selectedLinks, thisIndex)) {
-      newArray = (0, _filter["default"])(selectedLinks).call(selectedLinks, function (link) {
-        return link !== thisIndex;
-      });
-    } else {
-      var _context;
-      newArray = (0, _concat["default"])(_context = []).call(_context, selectedLinks, [thisIndex]);
-    }
-    updateSelectedLinks((0, _concat["default"])(_context2 = []).call(_context2, newArray));
-  };
   return (0, _react2.jsx)(_index.Box, {
     isRow: true
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+  }, (0, _react2.jsx)(_index.Box, {
+    mr: "xs"
+  }, (0, _react2.jsx)(_index.Box, {
     minWidth: "39.5px",
     minHeight: "39.5px",
     sx: sx.iconContainer
@@ -246,7 +237,7 @@ var Stage = function Stage(_ref) {
       name: iconTitle
     },
     color: "accent.40",
-    size: "24px",
+    size: "15px",
     sx: {
       zIndex: 3
     }
@@ -258,66 +249,40 @@ var Stage = function Stage(_ref) {
   }, title), (0, _react2.jsx)(_index.Box, {
     pl: "0px",
     mb: "25px"
-  }, (0, _map["default"])(links).call(links, function (link, index) {
+  }, (0, _map["default"])(links).call(links, function (link) {
     return (0, _react2.jsx)(LinkRow, (0, _extends2["default"])({}, link, {
-      onSelectionChange: onSelectionChange,
-      index: index,
-      isLinkSelected: selectedLinks.length !== 0,
-      isLastLink: index === links.length - 1,
       key: link.title
     }));
   }))));
 };
 var LinkRow = function LinkRow(_ref2) {
-  var index = _ref2.index,
-    isLastLink = _ref2.isLastLink,
+  var title = _ref2.title,
     isLinkSelected = _ref2.isLinkSelected,
-    onSelectionChange = _ref2.onSelectionChange,
-    title = _ref2.title;
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    isSelected = _useState4[0],
-    handleSelectionChange = _useState4[1];
-  var _useState5 = (0, _react.useState)(0),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    verticalSeparatorHeight = _useState6[0],
-    setVerticalSeparatorHeight = _useState6[1];
-  var iconRef = (0, _react.useRef)();
-  var rowRef = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
-    var _rowRef$current$getBo = rowRef.current.getBoundingClientRect(),
-      height = _rowRef$current$getBo.height;
-    var _iconRef$current$getB = iconRef.current.getBoundingClientRect(),
-      iconRefHeight = _iconRef$current$getB.height;
-    var marginAccommodation = 4;
-    var halfIconHeight = iconRefHeight / 2;
-    setVerticalSeparatorHeight(height - halfIconHeight - marginAccommodation);
-  }, [iconRef, rowRef]);
+    customIcon = _ref2.customIcon;
+  var _useState = (0, _react.useState)(isLinkSelected),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isSelected = _useState2[0],
+    handleSelectionChange = _useState2[1];
   var onIconPress = function onIconPress() {
     handleSelectionChange(!isSelected);
-    onSelectionChange(index);
   };
   return (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    ref: rowRef
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Box, null, customIcon ? (0, _react2.jsx)(_index.Icon, {
+    icon: customIcon,
+    size: "22px"
+  }) : (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "completed step icon indicator",
     onPress: onIconPress,
-    ref: iconRef,
     sx: sx.linkRowIconButton
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isSelected ? _CheckCircleIcon["default"] : RadioButtonIcon,
-    size: "sm",
-    sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected,
+    size: "22px",
+    sx: isSelected ? sx.linkRowIconSelected : sx.linkRowIconNotSelected,
     title: {
       name: 'Check Circle Icon'
     }
-  })), !isLastLink && isLinkSelected && (0, _react2.jsx)(_index.Separator, {
-    orientation: "vertical",
-    sx: _objectSpread(_objectSpread({}, sx.linkRowSeparator), {}, {
-      maxHeight: verticalSeparatorHeight
-    })
-  })), (0, _react2.jsx)(_index.Link, {
+  }))), (0, _react2.jsx)(_index.Link, {
     href: "https://www.pingidentity.com",
     sx: sx.linkRowText,
     target: "_blank"
@@ -341,4 +306,10 @@ var Default = function Default() {
     });
   })));
 };
-exports.Default = Default;
+exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.trialExperienceNav["default"]
+  }
+};

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

@@ -121,6 +121,9 @@ var FIGMA_LINKS = {
   slider: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43112%3A1773&mode=dev'
   },
+  trialExperienceNav: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43368%3A159&mode=dev'
+  },
   trialExperienceButtons: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43369%3A445'
   },

package/lib/recipes/ConditionFilter.stories.js

@@ -11,6 +11,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 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 React from 'react';
+import PlusIcon from '@pingux/mdi-react/PlusIcon';
 import TrashIcon from '@pingux/mdi-react/TrashIcon';
 import { Badge, Box, Bracket, Button, Icon, IconButton, Item, RockerButton, RockerButtonGroup, SelectField, Text, TextField } from '../index';
 import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
@@ -199,7 +200,8 @@ export var Edit = function Edit() {
     "aria-label": "deleteButton",
     sx: {
       alignSelf: 'center'
-    }
+    },
+    ml: "sm"
   }, ___EmotionJSX(Icon, {
     icon: TrashIcon,
     sx: {
@@ -219,8 +221,8 @@ export var Edit = function Edit() {
   }, ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",
-    mb: "sm",
-    pr: "37px"
+    mb: "md",
+    pr: "42px"
   }, ___EmotionJSX(RockerButtonGroup, {
     mr: "sm",
     defaultSelectedKey: "all"
@@ -249,13 +251,18 @@ export var Edit = function Edit() {
   }, ___EmotionJSX(Text, {
     sx: sx.defaultText
   }, "NONE"))), ___EmotionJSX(Text, null, ofTheConditionsAreTrueCopy), ___EmotionJSX(Button, {
-    variant: "inline",
-    width: "fit-content",
-    role: "button",
-    title: "Add Field Button",
     ml: "auto",
+    variant: "inlineWithIcon",
+    title: "Add Field Button",
     "aria-label": "add"
-  }, "+ Add")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
+  }, ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    mr: "xs",
+    size: 15,
+    title: {
+      name: 'Add Icon'
+    }
+  }), "Add")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
     return ___EmotionJSX(Box, {
       isRow: true,
       alignItems: "center",
@@ -275,12 +282,18 @@ export var Edit = function Edit() {
           }
         }
       },
+      labelProps: {
+        mb: 0
+      },
       "aria-label": "temp-label"
     }), ___EmotionJSX(SelectField, {
       hasNoStatusIndicator: true,
       selectedKey: "Equals",
       mr: "md",
       "aria-label": "temp-label",
+      labelProps: {
+        mb: 0
+      },
       width: "125px"
     }, ___EmotionJSX(Item, {
       key: "Equals",
@@ -294,8 +307,10 @@ export var Edit = function Edit() {
       hasNoStatusIndicator: true,
       width: "44%",
       value: item.field3,
-      mr: "xs",
-      "aria-label": "temp-label"
+      "aria-label": "temp-label",
+      labelProps: {
+        mb: 0
+      }
     })), trashButton);
   }), ___EmotionJSX(Box, {
     isRow: true
@@ -305,13 +320,14 @@ export var Edit = function Edit() {
       '&::after': {
         bg: 'decorative.4',
         width: '2px'
-      }
+      },
+      p: 'md'
     })
   }, ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",
-    mb: "sm",
-    pr: "37px"
+    mb: "md",
+    pr: "42px"
   }, ___EmotionJSX(RockerButtonGroup, {
     mr: "sm",
     defaultSelectedKey: "any"
@@ -340,19 +356,22 @@ export var Edit = function Edit() {
   }, ___EmotionJSX(Text, {
     sx: sx.defaultText
   }, "NONE"))), ___EmotionJSX(Text, null, ofTheConditionsAreTrueCopy), ___EmotionJSX(Button, {
-    variant: "inline",
-    width: "fit-content",
-    role: "button",
-    title: "Add Field Button",
     ml: "auto",
+    variant: "inlineWithIcon",
+    title: "Add Field Button",
     "aria-label": "add"
-  }, "+ Add")), ___EmotionJSX(Box, {
-    ml: "lg"
-  }, _mapInstanceProperty(anyConditions).call(anyConditions, function (item) {
+  }, ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    mr: "xs",
+    size: 15,
+    title: {
+      name: 'Add Icon'
+    }
+  }), "Add")), ___EmotionJSX(Box, null, _mapInstanceProperty(anyConditions).call(anyConditions, function (item, index) {
     return ___EmotionJSX(Box, {
       isRow: true,
       alignItems: "center",
-      mb: "md",
+      mb: index + 1 === anyConditions.length ? 0 : 'md',
       key: item.key
     }, ___EmotionJSX(Box, {
       isRow: true,
@@ -368,13 +387,19 @@ export var Edit = function Edit() {
             bg: 'decorative.7'
           }
         }
+      },
+      labelProps: {
+        mb: 0
       }
     }), ___EmotionJSX(SelectField, {
       "aria-label": "temp-label",
       hasNoStatusIndicator: true,
       selectedKey: "Equals",
       mr: "md",
-      width: "125px"
+      width: "125px",
+      labelProps: {
+        mb: 0
+      }
     }, ___EmotionJSX(Item, {
       key: "Equals",
       textValue: "Equals",
@@ -388,7 +413,9 @@ export var Edit = function Edit() {
       hasNoStatusIndicator: true,
       value: item.field3,
       width: "44%",
-      mr: "xs"
+      labelProps: {
+        mb: 0
+      }
     })), trashButton);
   }))), ___EmotionJSX(Box, {
     alignSelf: "start"
@@ -401,13 +428,14 @@ export var Edit = function Edit() {
       '&::after': {
         bg: 'decorative.4',
         width: '2px'
-      }
+      },
+      p: 'md'
     })
   }, ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",
-    mb: "sm",
-    pr: "37px"
+    mb: "md",
+    pr: "42px"
   }, ___EmotionJSX(RockerButtonGroup, {
     mr: "sm",
     defaultSelectedKey: "none"
@@ -436,19 +464,22 @@ export var Edit = function Edit() {
   }, ___EmotionJSX(Text, {
     sx: sx.defaultText
   }, "NONE"))), ___EmotionJSX(Text, null, ofTheConditionsAreTrueCopy), ___EmotionJSX(Button, {
-    variant: "inline",
-    width: "fit-content",
-    role: "button",
-    title: "Add Field Button",
     ml: "auto",
+    variant: "inlineWithIcon",
+    title: "Add Field Button",
     "aria-label": "add"
-  }, "+ Add")), ___EmotionJSX(Box, {
-    ml: "lg"
-  }, _mapInstanceProperty(noneConditions).call(noneConditions, function (item) {
+  }, ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    mr: "xs",
+    size: 15,
+    title: {
+      name: 'Add Icon'
+    }
+  }), "Add")), ___EmotionJSX(Box, null, _mapInstanceProperty(noneConditions).call(noneConditions, function (item, index) {
     return ___EmotionJSX(Box, {
       isRow: true,
       alignItems: "center",
-      mb: "md",
+      mb: index + 1 === anyConditions.length ? 0 : 'md',
       key: item.key
     }, ___EmotionJSX(Box, {
       isRow: true,
@@ -464,13 +495,19 @@ export var Edit = function Edit() {
             bg: 'accent.20'
           }
         }
+      },
+      labelProps: {
+        mb: 0
       }
     }), ___EmotionJSX(SelectField, {
       "aria-label": "temp-label",
       hasNoStatusIndicator: true,
       selectedKey: "Equals",
       mr: "md",
-      width: "125px"
+      width: "125px",
+      labelProps: {
+        mb: 0
+      }
     }, ___EmotionJSX(Item, {
       key: "Equals",
       textValue: "Equals",
@@ -482,9 +519,11 @@ export var Edit = function Edit() {
     }, "Not Equal")), ___EmotionJSX(TextField, {
       "aria-label": "temp-label",
       hasNoStatusIndicator: true,
+      labelProps: {
+        mb: 0
+      },
       value: item.field3,
-      width: "44%",
-      mr: "xs"
+      width: "44%"
     })), trashButton);
   }))), ___EmotionJSX(Box, {
     alignSelf: "start"

package/lib/recipes/TrialExperienceStatusBar.stories.js

@@ -1,22 +1,10 @@
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 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 _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useState } from 'react';
 import CheckCircleIcon from '@pingux/mdi-react/CheckCircleIcon';
 import { Box, Icon, IconButton, Link, Separator, Text } from '../index';
+import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Trial Experience Nav'
@@ -66,36 +54,53 @@ var EarthCircleIcon = function EarthCircleIcon() {
 };
 var RadioButtonIcon = function RadioButtonIcon(props) {
   return ___EmotionJSX("svg", _extends({
-    "data-name": "Layer 1",
+    viewBox: "0 0 22 22",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 17.5 17.5",
     "aria-labelledby": "radio-button-icon-title"
   }, props), ___EmotionJSX("title", {
     id: "radio-button-icon-title"
   }, "Radio Button Icon"), ___EmotionJSX("path", {
-    className: "cls-1",
-    fill: "#B3BEE8",
-    d: "M9,18.25A8.75,8.75,0,1,1,17.75,9.5,8.76,8.76,0,0,1,9,18.25ZM9,1.75A7.75,7.75,0,1,0,16.75,9.5,7.76,7.76,0,0,0,9,1.75Z",
-    transform: "translate(-0.25 -0.75)"
+    d: "M11 18.3333C9.05508 18.3333 7.18982 17.5607 5.81455 16.1854C4.43928 14.8102 3.66667 12.9449 3.66667 11C3.66667 9.05507 4.43928 7.18981 5.81455 5.81455C7.18982 4.43928 9.05508 3.66666 11 3.66666C12.9449 3.66666 14.8102 4.43928 16.1854 5.81455C17.5607 7.18981 18.3333 9.05507 18.3333 11C18.3333 12.9449 17.5607 14.8102 16.1854 16.1854C14.8102 17.5607 12.9449 18.3333 11 18.3333ZM11 1.83333C9.79621 1.83333 8.60422 2.07043 7.49207 2.5311C6.37992 2.99177 5.36939 3.66698 4.51819 4.51818C2.7991 6.23727 1.83333 8.56884 1.83333 11C1.83333 13.4311 2.7991 15.7627 4.51819 17.4818C5.36939 18.333 6.37992 19.0082 7.49207 19.4689C8.60422 19.9296 9.79621 20.1667 11 20.1667C13.4311 20.1667 15.7627 19.2009 17.4818 17.4818C19.2009 15.7627 20.1667 13.4311 20.1667 11C20.1667 9.79621 19.9296 8.60421 19.4689 7.49206C19.0082 6.37991 18.333 5.36939 17.4818 4.51818C16.6306 3.66698 15.6201 2.99177 14.5079 2.5311C13.3958 2.07043 12.2038 1.83333 11 1.83333Z",
+    fill: "#B3BEE8"
   }), ___EmotionJSX("circle", {
-    className: "cls-2",
-    cx: "8.75",
-    cy: "8.75",
-    r: "8.05",
+    cx: "11",
+    cy: "11",
+    r: "8",
     fill: "white"
   }));
 };
+var IntegrateYourAppIcon = function IntegrateYourAppIcon(props) {
+  return ___EmotionJSX("svg", _extends({
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": "integrate-your-app-icon-title"
+  }, props), ___EmotionJSX("title", {
+    id: "integrate-your-app-icon-title"
+  }, "Integrate Your App Icon"), ___EmotionJSX("path", {
+    d: "M2 5H5V8H2V5ZM8.98124 9.18922C8.40906 8.51487 7.5878 8 6 8V5C8.4122 5 10.0909 5.86013 11.2688 7.24828C12.3198 8.48703 12.8987 10.0806 13.3691 11.3758L13.4097 11.4874C13.9318 12.9231 14.3502 14.0229 15.0188 14.8108C15.5909 15.4851 16.4122 16 18 16V19H6V16H11.0563C10.9745 15.8905 10.8976 15.7846 10.8245 15.6841L10.7869 15.6323C10.2778 14.9323 9.93844 14.4905 9.36346 14.1517C8.79448 13.8164 7.83564 13.5 6 13.5V10.5C7.7039 10.5 9.02155 10.73 10.0813 11.1674C9.7558 10.3671 9.42315 9.71004 8.98124 9.18922ZM5 10.5H2V13.5H5V10.5ZM2 16H5V19H2V16ZM22 16H19V19H22V16Z",
+    fill: "#FF8324"
+  }));
+};
 var data = [{
   title: 'Design a Solution',
   icon: ArtIcon,
   iconTitle: 'Art Icon',
   key: 0,
   links: [{
+    isLinkSelected: true,
     title: 'Registration'
   }, {
+    isLinkSelected: true,
     title: 'Authentication'
   }, {
+    isLinkSelected: true,
     title: 'Profile management'
+  }, {
+    title: 'Account recovery'
   }, {
     title: 'Experience your solution'
   }]
@@ -119,6 +124,9 @@ var data = [{
   iconTitle: 'Earth Circle Icon',
   key: 2,
   links: [{
+    customIcon: IntegrateYourAppIcon,
+    title: 'Integrate your app'
+  }, {
     title: 'Learn about DaVinci'
   }, {
     title: 'View a workflow'
@@ -131,7 +139,11 @@ var sx = {
     justifyContent: 'center',
     mr: 'sm',
     borderRadius: '50%',
-    zIndex: 3
+    zIndex: 3,
+    '& > svg ': {
+      width: '28px',
+      height: '28px'
+    }
   },
   headingSeparator: {
     flexGrow: 1,
@@ -146,7 +158,7 @@ var sx = {
     color: 'accent.30',
     lineHeight: '18px',
     fontWeight: '3',
-    m: '12px 0px 28px 5px',
+    m: '12px 0px 28px 0px',
     maxWidth: '195px'
   },
   linkRowIconButton: {
@@ -174,19 +186,12 @@ var sx = {
       fill: 'accent.80'
     }
   },
-  linkRowSeparator: {
-    flexGrow: 1,
-    backgroundColor: 'accent.30',
-    width: '1px !important',
-    zIndex: 2,
-    m: '-4px 5px -5px 11.5px !important'
-  },
   linkRowText: {
     fontSize: 'md',
     color: '#163CE3',
     lineHeight: '18px',
     fontWeight: '0',
-    m: '3px 0px 20px 10px',
+    m: '3px 0px 15px 10px',
     maxWidth: '140px'
   },
   container: {
@@ -204,26 +209,11 @@ var Stage = function Stage(_ref) {
     iconTitle = _ref.iconTitle,
     links = _ref.links,
     isLastStage = _ref.isLastStage;
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedLinks = _useState2[0],
-    updateSelectedLinks = _useState2[1];
-  var onSelectionChange = function onSelectionChange(thisIndex) {
-    var _context2;
-    var newArray = [];
-    if (_includesInstanceProperty(selectedLinks).call(selectedLinks, thisIndex)) {
-      newArray = _filterInstanceProperty(selectedLinks).call(selectedLinks, function (link) {
-        return link !== thisIndex;
-      });
-    } else {
-      var _context;
-      newArray = _concatInstanceProperty(_context = []).call(_context, selectedLinks, [thisIndex]);
-    }
-    updateSelectedLinks(_concatInstanceProperty(_context2 = []).call(_context2, newArray));
-  };
   return ___EmotionJSX(Box, {
     isRow: true
-  }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+  }, ___EmotionJSX(Box, {
+    mr: "xs"
+  }, ___EmotionJSX(Box, {
     minWidth: "39.5px",
     minHeight: "39.5px",
     sx: sx.iconContainer
@@ -233,7 +223,7 @@ var Stage = function Stage(_ref) {
       name: iconTitle
     },
     color: "accent.40",
-    size: "24px",
+    size: "15px",
     sx: {
       zIndex: 3
     }
@@ -245,66 +235,40 @@ var Stage = function Stage(_ref) {
   }, title), ___EmotionJSX(Box, {
     pl: "0px",
     mb: "25px"
-  }, _mapInstanceProperty(links).call(links, function (link, index) {
+  }, _mapInstanceProperty(links).call(links, function (link) {
     return ___EmotionJSX(LinkRow, _extends({}, link, {
-      onSelectionChange: onSelectionChange,
-      index: index,
-      isLinkSelected: selectedLinks.length !== 0,
-      isLastLink: index === links.length - 1,
       key: link.title
     }));
   }))));
 };
 var LinkRow = function LinkRow(_ref2) {
-  var index = _ref2.index,
-    isLastLink = _ref2.isLastLink,
+  var title = _ref2.title,
     isLinkSelected = _ref2.isLinkSelected,
-    onSelectionChange = _ref2.onSelectionChange,
-    title = _ref2.title;
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isSelected = _useState4[0],
-    handleSelectionChange = _useState4[1];
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    verticalSeparatorHeight = _useState6[0],
-    setVerticalSeparatorHeight = _useState6[1];
-  var iconRef = useRef();
-  var rowRef = useRef();
-  useEffect(function () {
-    var _rowRef$current$getBo = rowRef.current.getBoundingClientRect(),
-      height = _rowRef$current$getBo.height;
-    var _iconRef$current$getB = iconRef.current.getBoundingClientRect(),
-      iconRefHeight = _iconRef$current$getB.height;
-    var marginAccommodation = 4;
-    var halfIconHeight = iconRefHeight / 2;
-    setVerticalSeparatorHeight(height - halfIconHeight - marginAccommodation);
-  }, [iconRef, rowRef]);
+    customIcon = _ref2.customIcon;
+  var _useState = useState(isLinkSelected),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSelected = _useState2[0],
+    handleSelectionChange = _useState2[1];
   var onIconPress = function onIconPress() {
     handleSelectionChange(!isSelected);
-    onSelectionChange(index);
   };
   return ___EmotionJSX(Box, {
-    isRow: true,
-    ref: rowRef
-  }, ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
+    isRow: true
+  }, ___EmotionJSX(Box, null, customIcon ? ___EmotionJSX(Icon, {
+    icon: customIcon,
+    size: "22px"
+  }) : ___EmotionJSX(IconButton, {
     "aria-label": "completed step icon indicator",
     onPress: onIconPress,
-    ref: iconRef,
     sx: sx.linkRowIconButton
   }, ___EmotionJSX(Icon, {
     icon: isSelected ? CheckCircleIcon : RadioButtonIcon,
-    size: "sm",
-    sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected,
+    size: "22px",
+    sx: isSelected ? sx.linkRowIconSelected : sx.linkRowIconNotSelected,
     title: {
       name: 'Check Circle Icon'
     }
-  })), !isLastLink && isLinkSelected && ___EmotionJSX(Separator, {
-    orientation: "vertical",
-    sx: _objectSpread(_objectSpread({}, sx.linkRowSeparator), {}, {
-      maxHeight: verticalSeparatorHeight
-    })
-  })), ___EmotionJSX(Link, {
+  }))), ___EmotionJSX(Link, {
     href: "https://www.pingidentity.com",
     sx: sx.linkRowText,
     target: "_blank"
@@ -327,4 +291,10 @@ export var Default = function Default() {
       key: stage.title
     });
   })));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.trialExperienceNav["default"]
+  }
 };

package/lib/utils/designUtils/figmaLinks.js

@@ -114,6 +114,9 @@ export var FIGMA_LINKS = {
   slider: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43112%3A1773&mode=dev'
   },
+  trialExperienceNav: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43368%3A159&mode=dev'
+  },
   trialExperienceButtons: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43369%3A445'
   },

package/package.json

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