@pingux/astro 2.0.4-alpha.0 → 2.0.4-alpha.2

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

@@ -18,6 +18,7 @@ var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _react = _interopRequireWildcard(require("react"));
 var _DotsVerticalIcon = _interopRequireDefault(require("mdi-react/DotsVerticalIcon"));
+var _useOverlappingMenuHoverState = _interopRequireDefault(require("../hooks/useOverlappingMenuHoverState"));
 var _index = require("../index");
 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); }
@@ -54,7 +55,6 @@ var testData = [{
   hasSeparator: false,
   hasInsetSeparator: true,
   badgeText: 'default',
-  expirationText: 'Expiring On: 2022-12-08',
   childrenObjects: [{
     key: 'Staging Policy',
     name: 'Staging Policy',
@@ -115,6 +115,93 @@ var testSort = function testSort(array) {
 };
 var unsorted = flattenArray(testData);
 var sorted = testSort(unsorted);
+var sx = {
+  badge: {
+    alignItems: 'center',
+    alignSelf: 'center',
+    ml: 'lg',
+    p: '3px 5px 2px 5px'
+  },
+  bottomBracket: {
+    container: {
+      ml: 12,
+      top: -2,
+      position: 'relative',
+      maxWidth: 15
+    },
+    separator: {
+      backgroundColor: 'decorative.7',
+      marginLeft: '2px !important',
+      maxHeight: '30px',
+      width: '2px !important'
+    },
+    separatorBox: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      minWidth: 9
+    }
+  },
+  expirationBadge: {
+    alignItems: 'center',
+    alignSelf: 'center',
+    border: 'solid 1px',
+    borderColor: 'neutral.80',
+    p: '3px 5px 2px 5px'
+  },
+  listElement: {
+    container: {
+      height: 73,
+      pl: 24,
+      pr: 14
+    },
+    subText: {
+      color: 'text.secondary',
+      fontSize: 'sm',
+      fontWeight: 0
+    },
+    text: {
+      color: 'text.primary',
+      fontSize: 'md',
+      fontWeight: 1
+    },
+    textBox: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: 'auto'
+    }
+  },
+  listViewItem: {
+    minHeight: '75px',
+    padding: 1,
+    '&.has-inset-separator': {
+      '&:before': {
+        borderBottom: '1px solid',
+        borderBottomColor: 'line.light',
+        bottom: 0,
+        content: '""',
+        position: 'absolute',
+        right: 0,
+        width: 'calc(100% - 43px)'
+      }
+    },
+    '&.is-focused': {
+      '&:after': {
+        borderBottomColor: 'focus',
+        bottom: 0,
+        content: '""',
+        position: 'absolute',
+        right: 0,
+        width: 'calc(100% - 43px)'
+      }
+    }
+  },
+  topBracket: {
+    top: 50,
+    left: 12,
+    bottom: 0,
+    position: 'absolute'
+  }
+};
 var Default = function Default(_ref) {
   var _context2;
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
@@ -126,12 +213,9 @@ var Default = function Default(_ref) {
   var BottomBracket = function BottomBracket() {
     var color = '#CACED3';
     return (0, _react2.jsx)(_index.Box, {
-      sx: {
-        width: '15px',
-        position: 'relative'
-      }
+      sx: sx.bottomBracket.container
     }, (0, _react2.jsx)(_index.Box, {
-      flexBasis: "50%"
+      flexBasis: "53%"
     }, (0, _react2.jsx)("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       version: "1.1",
@@ -176,17 +260,40 @@ var Default = function Default(_ref) {
     }))))));
   };
 
+  // the vector shield and key icon.
+  var ShieldIcon = function ShieldIcon(props) {
+    return (0, _react2.jsx)("svg", (0, _extends2["default"])({
+      width: "19",
+      height: "23",
+      viewBox: "0 0 19 23",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), (0, _react2.jsx)("path", {
+      d: "M9.5 7.33342C9.77627 7.33342 10.0412 7.44316 10.2366 7.63851C10.4319 7.83386 10.5417 8.09881 10.5417 8.37508C10.5417 8.65135 10.4319 8.9163 10.2366 9.11165C10.0412 9.307 9.77627 9.41675 9.5 9.41675C9.22373 9.41675 8.95878 9.307 8.76343 9.11165C8.56808 8.9163 8.45833 8.65135 8.45833 8.37508C8.45833 8.09881 8.56808 7.83386 8.76343 7.63851C8.95878 7.44316 9.22373 7.33342 9.5 7.33342ZM18.875 10.4584C18.875 16.2397 14.875 21.6459 9.5 22.9584C4.125 21.6459 0.125 16.2397 0.125 10.4584V4.20842L9.5 0.041748L18.875 4.20842V10.4584ZM9.5 5.25008C8.6712 5.25008 7.87634 5.57932 7.29029 6.16537C6.70424 6.75142 6.375 7.54628 6.375 8.37508C6.375 9.73967 7.23958 10.8959 8.45833 11.323V17.7501H10.5417V15.6667H12.625V13.5834H10.5417V11.323C11.7604 10.8959 12.625 9.73967 12.625 8.37508C12.625 7.54628 12.2958 6.75142 11.7097 6.16537C11.1237 5.57932 10.3288 5.25008 9.5 5.25008Z"
+    }));
+  };
+  var Shield = function Shield(_ref2) {
+    var isParent = _ref2.isParent;
+    return (0, _react2.jsx)(_index.Box, {
+      alignItems: "center",
+      justifyContent: "center",
+      minWidth: 24,
+      sx: {
+        position: 'relative'
+      }
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: ShieldIcon,
+      color: isParent ? 'decorative.7' : 'accent.40',
+      size: 24,
+      isLinked: isParent
+    }), isParent && (0, _react2.jsx)(TopBracket, null));
+  };
+
   // the top portion of the bracket svg, this is basically just a straight vertical line.
   var TopBracket = function TopBracket() {
     var color = '#CACED3';
     return (0, _react2.jsx)(_index.Box, {
       width: 15,
-      sx: {
-        position: 'absolute',
-        bottom: 0,
-        left: 12,
-        top: 50
-      }
+      sx: sx.topBracket
     }, (0, _react2.jsx)("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       version: "1.1",
@@ -208,20 +315,11 @@ var Default = function Default(_ref) {
     }))));
   };
 
-  // the vector shield and key icon.
-  var ShieldVector = function ShieldVector(props) {
-    return (0, _react2.jsx)("svg", (0, _extends2["default"])({
-      width: "19",
-      height: "23",
-      viewBox: "0 0 19 23",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, props), (0, _react2.jsx)("path", {
-      d: "M9.5 7.33342C9.77627 7.33342 10.0412 7.44316 10.2366 7.63851C10.4319 7.83386 10.5417 8.09881 10.5417 8.37508C10.5417 8.65135 10.4319 8.9163 10.2366 9.11165C10.0412 9.307 9.77627 9.41675 9.5 9.41675C9.22373 9.41675 8.95878 9.307 8.76343 9.11165C8.56808 8.9163 8.45833 8.65135 8.45833 8.37508C8.45833 8.09881 8.56808 7.83386 8.76343 7.63851C8.95878 7.44316 9.22373 7.33342 9.5 7.33342ZM18.875 10.4584C18.875 16.2397 14.875 21.6459 9.5 22.9584C4.125 21.6459 0.125 16.2397 0.125 10.4584V4.20842L9.5 0.041748L18.875 4.20842V10.4584ZM9.5 5.25008C8.6712 5.25008 7.87634 5.57932 7.29029 6.16537C6.70424 6.75142 6.375 7.54628 6.375 8.37508C6.375 9.73967 7.23958 10.8959 8.45833 11.323V17.7501H10.5417V15.6667H12.625V13.5834H10.5417V11.323C11.7604 10.8959 12.625 9.73967 12.625 8.37508C12.625 7.54628 12.2958 6.75142 11.7097 6.16537C11.1237 5.57932 10.3288 5.25008 9.5 5.25008Z"
-    }));
-  };
-
   // reusable piece of code that handles the iconbutton and popover on the right side of the rows
-  var IconWithPopover = function IconWithPopover() {
+  var IconWithPopover = function IconWithPopover(_ref3) {
+    var handleHoverEnd = _ref3.handleHoverEnd,
+      handleHoverStart = _ref3.handleHoverStart,
+      handleMenuHoverEnd = _ref3.handleMenuHoverEnd;
     return (0, _react2.jsx)(_index.PopoverMenu, {
       direction: "left"
     }, (0, _react2.jsx)(_index.Box, {
@@ -236,6 +334,9 @@ var Default = function Default(_ref) {
       m: "0.61px"
     }))), (0, _react2.jsx)(_index.Menu, {
       direction: "left",
+      onAction: handleHoverEnd,
+      onHoverEnd: handleMenuHoverEnd,
+      onHoverStart: handleHoverStart,
       sx: {
         minWidth: '155px',
         minHeight: '144px'
@@ -259,17 +360,12 @@ var Default = function Default(_ref) {
     return (0, _react2.jsx)(_index.Badge, {
       label: "Default",
       bg: "active",
-      sx: {
-        marginLeft: '25px',
-        alignSelf: 'center',
-        alignItems: 'center',
-        padding: '3px 5px 2px 5px'
-      }
+      sx: sx.badge
     });
   };
-  var ExprirationBadge = function ExprirationBadge(props) {
-    var expirationText = props.expirationText,
-      badgeText = props.badgeText;
+  var ExpirationBadge = function ExpirationBadge(_ref4) {
+    var expirationText = _ref4.expirationText,
+      badgeText = _ref4.badgeText;
     return (0, _react2.jsx)(_index.Box, {
       sx: !badgeText && {
         paddingLeft: '72px'
@@ -279,129 +375,83 @@ var Default = function Default(_ref) {
       alignSelf: "center"
     }, (0, _react2.jsx)(_index.Badge, {
       bg: "white",
-      sx: {
-        border: 'solid 1px',
-        borderColor: 'neutral.80',
-        alignSelf: 'center',
-        alignItems: 'center',
-        padding: '3px 5px 2px 5px'
-      },
+      sx: sx.expirationBadge,
       textColor: "text.primary",
       label: expirationText
     }));
   };
-
-  // jsx of the production row
-  var Production = function Production(props) {
-    var badgeText = props.badgeText,
-      hasStaging = props.hasStaging,
-      policyId = props.policyId,
-      name = props.name;
+  var ListElementContent = function ListElementContent(_ref5) {
+    var badgeText = _ref5.badgeText,
+      isChild = _ref5.isChild,
+      name = _ref5.name,
+      policyId = _ref5.policyId;
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
-      height: "75px"
-    }, (0, _react2.jsx)(_index.Box, {
-      alignItems: "center",
-      justifyContent: "center",
-      sx: {
-        position: 'relative'
-      }
-    }, (0, _react2.jsx)(_index.Icon, {
-      icon: ShieldVector,
-      color: hasStaging ? 'decorative.7' : 'accent.40',
-      size: 24,
-      isLinked: hasStaging
-    }), hasStaging && (0, _react2.jsx)(TopBracket, null)), (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      mr: "auto",
-      alignSelf: "center",
-      justifyContent: "center",
-      ml: "18px",
-      alignItems: "center"
-    }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
-      sx: {
-        fontWeight: 1,
-        color: 'text.primary',
-        fontSize: 'md'
-      }
+      ml: isChild ? 0 : 18,
+      sx: sx.listElement.textBox
+    }, isChild && (0, _react2.jsx)(_index.Separator, {
+      orientation: "vertical",
+      sx: sx.bottomBracket.separator
+    }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+      sx: sx.listElement.text
     }, name), (0, _react2.jsx)(_index.Text, {
-      sx: {
-        fontWeight: 0,
-        color: 'text.secondary',
-        fontSize: 'sm'
-      }
-    }, "Policy Id:", ' ', policyId)), badgeText && (0, _react2.jsx)(DefaultBadge, null)), (0, _react2.jsx)(IconWithPopover, null));
+      sx: sx.listElement.subText
+    }, "Policy Id:", ' ', policyId)), badgeText && (0, _react2.jsx)(DefaultBadge, null));
   };
-
-  // jsx of the staging row.
-  var Staging = function Staging(props) {
-    var badgeText = props.badgeText,
-      expirationText = props.expirationText,
-      policyId = props.policyId,
-      name = props.name;
-    return (0, _react2.jsx)(_index.Box, {
+  var ListElement = function ListElement(_ref6) {
+    var badgeText = _ref6.badgeText,
+      expirationText = _ref6.expirationText,
+      isChild = _ref6.isChild,
+      isParent = _ref6.isParent,
+      name = _ref6.name,
+      policyId = _ref6.policyId;
+    var listItemRef = (0, _react.useRef)();
+    var _useOverlappingMenuHo = (0, _useOverlappingMenuHoverState["default"])({
+        listItemRef: listItemRef
+      }),
+      handleHoverEnd = _useOverlappingMenuHo.handleHoverEnd,
+      handleHoverStart = _useOverlappingMenuHo.handleHoverStart,
+      handleMenuHoverEnd = _useOverlappingMenuHo.handleMenuHoverEnd,
+      handleMouseMove = _useOverlappingMenuHo.handleMouseMove,
+      isHovered = _useOverlappingMenuHo.isHovered;
+    return (0, _react2.jsx)(_index.ListItem, {
+      isHovered: isHovered,
       isRow: true,
-      height: "75px",
-      marginLeft: "12px"
-    }, (0, _react2.jsx)(BottomBracket, null), (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      alignItems: "center",
-      justifyContent: "center"
-    }, (0, _react2.jsx)(_index.Box, {
-      pl: "0px",
-      height: "30px",
-      flexDirection: "row",
-      alignItems: "center"
-    }, (0, _react2.jsx)(_index.Separator, {
-      orientation: "vertical",
-      sx: {
-        width: '2px !important',
-        backgroundColor: 'decorative.7',
-        marginLeft: '2px !important'
-      }
-    })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
-      sx: {
-        fontWeight: 1,
-        color: 'text.primary',
-        fontSize: 'md'
-      }
-    }, name), (0, _react2.jsx)(_index.Text, {
-      sx: {
-        fontWeight: 0,
-        color: 'text.secondary',
-        fontSize: 'sm'
-      }
-    }, "Policy Id:", ' ', policyId))), badgeText && (0, _react2.jsx)(DefaultBadge, null), expirationText && (0, _react2.jsx)(ExprirationBadge, {
+      onHoverEnd: handleHoverEnd,
+      onHoverStart: handleHoverStart,
+      onMouseMove: handleMouseMove,
+      ref: listItemRef,
+      variant: "listItem.hover",
+      sx: sx.listElement.container
+    }, !isChild ? (0, _react2.jsx)(Shield, {
+      isParent: isParent
+    }) : (0, _react2.jsx)(BottomBracket, null), (0, _react2.jsx)(ListElementContent, {
+      badgeText: badgeText,
+      expirationText: expirationText,
+      isChild: isChild,
+      name: name,
+      policyId: policyId
+    }), expirationText && (0, _react2.jsx)(ExpirationBadge, {
       expirationText: expirationText
-    }), (0, _react2.jsx)(IconWithPopover, null));
+    }), (0, _react2.jsx)(IconWithPopover, {
+      handleHoverEnd: handleHoverEnd,
+      handleMenuHoverEnd: handleMenuHoverEnd,
+      handleHoverStart: handleHoverStart
+    }));
   };
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.ListView, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_index.ListView, (0, _extends2["default"])({}, args, {
     items: theseItems
   }), function (item) {
     return (0, _react2.jsx)(_index.Item, (0, _extends2["default"])({}, item, {
       textValue: item.name,
       "data-id": item.key,
       listItemProps: {
-        minHeight: '75px',
-        sx: {
-          '&.has-inset-separator': {
-            '&:before': {
-              content: '""',
-              position: 'absolute',
-              width: 'calc(100% - 43px)',
-              right: 0,
-              bottom: 0,
-              borderBottom: '1px solid',
-              borderBottomColor: 'line.light'
-            }
-          }
-        }
+        sx: sx.listViewItem
       }
-    }), item.parentId ? (0, _react2.jsx)(Staging, (0, _extends2["default"])({}, item, {
-      hasInsetSeparator: true
-    })) : (0, _react2.jsx)(Production, (0, _extends2["default"])({
-      hasStaging: item.childrenObjects
+    }), (0, _react2.jsx)(ListElement, (0, _extends2["default"])({
+      isParent: item.childrenObjects,
+      isChild: item.parentId
     }, item)));
-  }));
+  });
 };
 exports.Default = Default;

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

@@ -20,6 +20,7 @@ var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
 var _PencilIcon = _interopRequireDefault(require("mdi-react/PencilIcon"));
 var _PlusIcon = _interopRequireDefault(require("mdi-react/PlusIcon"));
 var _hooks = require("../hooks");
+var _useOverlappingMenuHoverState = _interopRequireDefault(require("../hooks/useOverlappingMenuHoverState"));
 var _index = require("../index");
 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); }
@@ -188,46 +189,20 @@ var ListElement = function ListElement(_ref) {
   var item = _ref.item,
     isHoverable = _ref.isHoverable,
     onClosePanel = _ref.onClosePanel;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isHovered = _useState2[0],
-    setIsHovered = _useState2[1];
-  var _useState3 = (0, _react.useState)({}),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    mousePosition = _useState4[0],
-    setMousePosition = _useState4[1];
   var listItemRef = (0, _react.useRef)();
-  var handleMenuHoverEnd = function handleMenuHoverEnd() {
-    var currentPositionX = mousePosition.currentPositionX,
-      currentPositionY = mousePosition.currentPositionY;
-    var _listItemRef$current$ = listItemRef.current.getBoundingClientRect(),
-      height = _listItemRef$current$.height,
-      right = _listItemRef$current$.right,
-      top = _listItemRef$current$.top;
-    var hasMovedBackToRow = currentPositionY < top + height && currentPositionX < right;
-    if (hasMovedBackToRow) {
-      setIsHovered(true);
-      return;
-    }
-    setIsHovered(false);
-  };
-  var handleMouseMove = function handleMouseMove(e) {
-    setMousePosition({
-      currentPositionX: e.clientX,
-      currentPositionY: e.clientY
-    });
-  };
-  var handleHoveEnd = function handleHoveEnd() {
-    setIsHovered(false);
-  };
-  var handleHoveStart = function handleHoveStart() {
-    setIsHovered(true);
-  };
+  var _useOverlappingMenuHo = (0, _useOverlappingMenuHoverState["default"])({
+      listItemRef: listItemRef
+    }),
+    handleHoverEnd = _useOverlappingMenuHo.handleHoverEnd,
+    handleHoverStart = _useOverlappingMenuHo.handleHoverStart,
+    handleMenuHoverEnd = _useOverlappingMenuHo.handleMenuHoverEnd,
+    handleMouseMove = _useOverlappingMenuHo.handleMouseMove,
+    isHovered = _useOverlappingMenuHo.isHovered;
   return (0, _react2.jsx)(_index.ListItem, {
     isHovered: isHoverable && isHovered,
     isRow: true,
-    onHoverEnd: handleHoveEnd,
-    onHoverStart: handleHoveStart,
+    onHoverEnd: handleHoverEnd,
+    onHoverStart: handleHoverStart,
     onMouseMove: handleMouseMove,
     ref: listItemRef,
     sx: sx.listElement.wrapper
@@ -259,9 +234,9 @@ var ListElement = function ListElement(_ref) {
     icon: _MoreVertIcon["default"],
     size: "md"
   })), (0, _react2.jsx)(_index.Menu, {
-    onAction: handleHoveEnd,
+    onAction: handleHoverEnd,
     onHoverEnd: handleMenuHoverEnd,
-    onHoverStart: handleHoveStart
+    onHoverStart: handleHoverStart
   }, (0, _react2.jsx)(_reactStately.Item, {
     key: "enable"
   }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
@@ -277,14 +252,14 @@ var ListElement = function ListElement(_ref) {
   }))));
 };
 var Default = function Default() {
-  var _useState5 = (0, _react.useState)(),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    selectedItemId = _useState6[0],
-    setSelectedItemId = _useState6[1];
-  var _useState7 = (0, _react.useState)(),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    selectedKeys = _useState8[0],
-    setSelectedKeys = _useState8[1];
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    selectedItemId = _useState2[0],
+    setSelectedItemId = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    selectedKeys = _useState4[0],
+    setSelectedKeys = _useState4[1];
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
     panelState = _useOverlayPanelState.state,
     onPanelClose = _useOverlayPanelState.onClose;

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

@@ -1,9 +1,15 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-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$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 _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -13,6 +19,7 @@ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-s
 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"));
@@ -21,6 +28,8 @@ var _index = require("../index");
 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'
 };
@@ -139,6 +148,8 @@ var sx = {
     maxWidth: '195px'
   },
   linkRowIconButton: {
+    height: '23.5px',
+    width: '23.5px',
     '&.is-pressed': {
       backgroundColor: 'transparent'
     },
@@ -164,10 +175,9 @@ var sx = {
   linkRowSeparator: {
     flexGrow: 1,
     backgroundColor: 'accent.30',
-    maxHeight: '100%',
     width: '1px !important',
     zIndex: 2,
-    m: '-5px 5px -5px 11.5px !important'
+    m: '-4px 5px -5px 11.5px !important'
   },
   linkRowText: {
     fontSize: 'md',
@@ -186,11 +196,11 @@ var sx = {
     boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
   }
 };
-var Stage = function Stage(props) {
-  var title = props.title,
-    icon = props.icon,
-    links = props.links,
-    isLastStage = props.isLastStage;
+var Stage = function Stage(_ref) {
+  var title = _ref.title,
+    icon = _ref.icon,
+    links = _ref.links,
+    isLastStage = _ref.isLastStage;
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     selectedLinks = _useState2[0],
@@ -239,43 +249,57 @@ var Stage = function Stage(props) {
     }));
   }))));
 };
-var LinkRow = function LinkRow(props) {
-  var title = props.title,
-    index = props.index,
-    onSelectionChange = props.onSelectionChange,
-    isLinkSelected = props.isLinkSelected,
-    isLastLink = props.isLastLink;
+var LinkRow = function LinkRow(_ref2) {
+  var index = _ref2.index,
+    isLastLink = _ref2.isLastLink,
+    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]);
   var onIconPress = function onIconPress() {
     handleSelectionChange(!isSelected);
     onSelectionChange(index);
   };
   return (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
-    sx: {
-      height: '23.5px',
-      width: '23.5px'
-    }
-  }, (0, _react2.jsx)(_index.IconButton, {
+    isRow: true,
+    ref: rowRef
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "completed step icon indicator",
     onPress: onIconPress,
-    sx: sx.linkRowIconButton,
-    "aria-label": "completed step icon indicator"
+    ref: iconRef,
+    sx: sx.linkRowIconButton
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isSelected ? _CheckCircleIcon["default"] : RadioButtonIcon,
     size: "sm",
     sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
-  }))), !isLastLink && isLinkSelected && (0, _react2.jsx)(_index.Separator, {
-    sx: sx.linkRowSeparator,
-    orientation: "vertical"
-  })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, {
+  })), !isLastLink && isLinkSelected && (0, _react2.jsx)(_index.Separator, {
+    orientation: "vertical",
+    sx: _objectSpread(_objectSpread({}, sx.linkRowSeparator), {}, {
+      maxHeight: verticalSeparatorHeight
+    })
+  })), (0, _react2.jsx)(_index.Link, {
     href: "https://www.pingidentity.com",
-    target: "_blank",
-    sx: sx.linkRowText
-  }, title)));
+    sx: sx.linkRowText,
+    target: "_blank"
+  }, title));
 };
 var Default = function Default() {
   // Open the `Story` addons tab to view the source code for full context.