@pingux/astro 2.0.0-alpha.5 → 2.0.0-alpha.7

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

@@ -7,7 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Box = _interopRequireDefault(require("../components/Box"));
+var _index = require("../index");
 var _colors = require("../styles/colors");
 var _react2 = require("@emotion/react");
 var _default = {
@@ -31,12 +31,12 @@ var sx = {
   }
 };
 var Default = function Default() {
-  return (0, _react2.jsx)(_Box["default"], {
+  return (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: sx.wrapper
-  }, (0, _react2.jsx)(_Box["default"], {
+  }, (0, _react2.jsx)(_index.Box, {
     sx: sx.arrowLine
-  }), (0, _react2.jsx)(_Box["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     color: "line.regular"
   }, ArrowIcon));
 };

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

@@ -33,7 +33,7 @@ var sx = {
     marginBottom: 'md',
     alignItems: 'center'
   },
-  chip: {
+  badge: {
     width: 'xx',
     height: '22px',
     alignSelf: 'center',
@@ -126,7 +126,7 @@ var Row = function Row(props) {
     }
   }), withBadge && (0, _react2.jsx)(_index.Badge, {
     label: "Required",
-    sx: sx.chip
+    sx: sx.badge
   }), withTooltip && (0, _react2.jsx)(_index.Box, {
     sx: sx.tooltipBox
   }, (0, _react2.jsx)(_index.HelpHint, {

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

@@ -29,7 +29,7 @@ var _CheckIcon = _interopRequireDefault(require("mdi-react/CheckIcon"));
 var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 var _SearchIcon = _interopRequireDefault(require("mdi-react/SearchIcon"));
-var _ = require("..");
+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; }
@@ -45,7 +45,7 @@ var data = [{
   key: 'Avengers',
   name: 'Avengers',
   subtitle: 'Default',
-  chipValue: '25',
+  badgeValue: '25',
   isDefaultSelected: true
 }, {
   id: '2',
@@ -53,21 +53,21 @@ var data = [{
   key: 'Credit Cards',
   name: 'Credit Cards',
   subtitle: '',
-  chipValue: '123'
+  badgeValue: '123'
 }, {
   id: '3',
   icon: 'Group',
   key: 'Debit Cards',
   name: 'Debit Cards',
   subtitle: '',
-  chipValue: '23'
+  badgeValue: '23'
 }, {
   id: '4',
   icon: 'Group',
   key: 'Digital Investors',
   name: 'Digital Investors',
   subtitle: 'N America',
-  chipValue: '12',
+  badgeValue: '12',
   isDefaultSelected: true
 }, {
   id: '5',
@@ -75,35 +75,35 @@ var data = [{
   key: 'Mortgages',
   name: 'Mortgages',
   subtitle: 'N America',
-  chipValue: '112'
+  badgeValue: '112'
 }, {
   id: '6',
   icon: 'Group',
   key: 'Person LOC',
   name: 'Person LOC',
   subtitle: '',
-  chipValue: '45'
+  badgeValue: '45'
 }, {
   id: '7',
   icon: 'Group',
   key: 'Production',
   name: 'Production',
   subtitle: '',
-  chipValue: '55'
+  badgeValue: '55'
 }, {
   id: '8',
   icon: 'Group',
   key: 'UX Team',
   name: 'UX Team',
   subtitle: '',
-  chipValue: '61'
+  badgeValue: '61'
 }, {
   id: '9',
   icon: 'Group',
   key: 'UI Team',
   name: 'UI Team',
   subtitle: '',
-  chipValue: '29'
+  badgeValue: '29'
 }];
 var sx = {
   listViewItem: {
@@ -173,12 +173,12 @@ var Default = function Default() {
       });
     });
   };
-  return (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Box, {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
     sx: {
       minHeight: '60px'
     },
     bg: "accent.99"
-  }, (0, _react2.jsx)(_.Box, {
+  }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     flexBasis: "0px",
     flexGrow: "1",
@@ -187,9 +187,9 @@ var Default = function Default() {
     pr: "md",
     justifyContent: "space-between",
     zIndex: 2
-  }, (0, _react2.jsx)(_.Box, {
+  }, (0, _react2.jsx)(_index.Box, {
     isRow: true
-  }, (0, _react2.jsx)(_.Icon, {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _AccountIcon["default"],
     alignSelf: "center",
     mr: "md",
@@ -197,32 +197,32 @@ var Default = function Default() {
     size: 25,
     flexShrink: 0,
     display: "flex"
-  }), (0, _react2.jsx)(_.Breadcrumbs, {
+  }), (0, _react2.jsx)(_index.Breadcrumbs, {
     icon: _ChevronRightIcon["default"]
-  }, (0, _react2.jsx)(_.Item, {
+  }, (0, _react2.jsx)(_index.Item, {
     key: "home",
     variant: "link",
     "data-id": "home"
-  }, "Ed Nepomuceno"), (0, _react2.jsx)(_.Item, {
+  }, "Ed Nepomuceno"), (0, _react2.jsx)(_index.Item, {
     key: "editGroups",
     variant: "link",
     "data-id": "editGroups"
-  }, "Edit Groups"))), (0, _react2.jsx)(_.Box, {
+  }, "Edit Groups"))), (0, _react2.jsx)(_index.Box, {
     isRow: true
-  }, (0, _react2.jsx)(_.IconButton, {
+  }, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "Close Panel"
-  }, (0, _react2.jsx)(_.Icon, {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _CloseIcon["default"],
     size: "sm"
-  }))))), (0, _react2.jsx)(_.Box, {
+  }))))), (0, _react2.jsx)(_index.Box, {
     pl: "md",
     pt: "25px"
-  }, (0, _react2.jsx)(_.Box, {
+  }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     justifyContent: "space-between"
-  }, (0, _react2.jsx)(_.Box, {
+  }, (0, _react2.jsx)(_index.Box, {
     width: "100%"
-  }, (0, _react2.jsx)(_.SearchField, {
+  }, (0, _react2.jsx)(_index.SearchField, {
     icon: _SearchIcon["default"],
     "aria-label": "Search",
     placeholder: "Search",
@@ -230,14 +230,14 @@ var Default = function Default() {
     mt: "0px",
     mr: "sm",
     onChange: setSearchValue
-  }), (0, _react2.jsx)(_.ListView, {
+  }), (0, _react2.jsx)(_index.ListView, {
     items: filteredItems,
     style: {
       width: '100%',
       outline: 'none'
     }
   }, function (item) {
-    return (0, _react2.jsx)(_.Item, {
+    return (0, _react2.jsx)(_index.Item, {
       key: item.key,
       textValue: item.name,
       "data-id": item.key,
@@ -245,43 +245,43 @@ var Default = function Default() {
         isRow: true,
         sx: sx.listViewItem
       }
-    }, (0, _react2.jsx)(_.Box, {
+    }, (0, _react2.jsx)(_index.Box, {
       isRow: true
-    }, (0, _react2.jsx)(_.Icon, {
+    }, (0, _react2.jsx)(_index.Icon, {
       icon: _AccountGroupIcon["default"],
       alignSelf: "center",
       mr: "md",
       color: "accent.40",
       size: 25,
       flexShrink: 1
-    }), (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Box, {
+    }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
       isRow: true
-    }, (0, _react2.jsx)(_.Text, {
+    }, (0, _react2.jsx)(_index.Text, {
       variant: "listTitle",
       mb: "xs",
       mr: "xs"
-    }, item.name), (0, _react2.jsx)(_.Badge, {
-      label: item.chipValue,
+    }, item.name), (0, _react2.jsx)(_index.Badge, {
+      label: item.badgeValue,
       bg: "accent.99",
       textColor: "text.secondary",
       sx: {
         minWidth: 'max-content'
       }
-    })), (0, _react2.jsx)(_.Text, {
+    })), (0, _react2.jsx)(_index.Text, {
       variant: "listSubtitle"
-    }, item.subtitle))), item.isDefaultSelected ? (0, _react2.jsx)(_.Box, {
+    }, item.subtitle))), item.isDefaultSelected ? (0, _react2.jsx)(_index.Box, {
       isRow: true,
       sx: sx.defaultSelectedBox
-    }, (0, _react2.jsx)(_.Icon, {
+    }, (0, _react2.jsx)(_index.Icon, {
       icon: _CheckIcon["default"],
       color: "neutral.20",
       size: 13,
       sx: {
         flexShrink: 0
       }
-    }), (0, _react2.jsx)(_.Text, {
+    }), (0, _react2.jsx)(_index.Text, {
       sx: sx.defaultSelectedTitle
-    }, "Added by Filter")) : (0, _react2.jsx)(_.CheckboxField, {
+    }, "Added by Filter")) : (0, _react2.jsx)(_index.CheckboxField, {
       controlProps: {
         color: 'neutral.10',
         'aria-label': 'Select'
@@ -297,18 +297,18 @@ var Default = function Default() {
         return checkBoxRef.current.focus();
       }
     }));
-  })), (0, _react2.jsx)(_.CollapsiblePanel, {
+  })), (0, _react2.jsx)(_index.CollapsiblePanel, {
     items: selectedItems,
     selectedFilterCount: selectedItems.length.toString(),
     listTitle: "Selected Groups",
     openAriaLabel: "Open filter menu?",
     closeAriaLabel: "Close filter menu?"
   }, function (item) {
-    return (0, _react2.jsx)(_.Item, {
+    return (0, _react2.jsx)(_index.Item, {
       key: item.key,
       textValue: item.name,
       "data-id": item.key
-    }, (0, _react2.jsx)(_.CollapsiblePanelItem, {
+    }, (0, _react2.jsx)(_index.CollapsiblePanelItem, {
       text: item.name,
       icon: item.isDefaultSelected ? _CheckIcon["default"] : _CloseIcon["default"],
       isDefaultSelected: item.isDefaultSelected,

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

@@ -14,9 +14,6 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _countriesList = require("countries-list");
-var _Box = _interopRequireDefault(require("../components/Box"));
-var _ComboBoxField = _interopRequireDefault(require("../components/ComboBoxField"));
-var _Input = _interopRequireDefault(require("../components/Input"));
 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); }
@@ -101,10 +98,10 @@ var Default = function Default() {
       setPhoneNumber(value);
     }
   };
-  return (0, _react2.jsx)(_Box["default"], {
+  return (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: sx.wrapperBox
-  }, (0, _react2.jsx)(_ComboBoxField["default"], {
+  }, (0, _react2.jsx)(_index.ComboBoxField, {
     mt: -5,
     width: "100%",
     isOpen: isOpen,
@@ -127,9 +124,9 @@ var Default = function Default() {
     return (0, _react2.jsx)(_index.Item, {
       key: item[0]
     }, (0, _concat["default"])(_context = (0, _concat["default"])(_context2 = "".concat(item[1].name)).call(_context2, item[1].name !== item[1]["native"] ? " (".concat(item[1]["native"], ")") : '', " +")).call(_context, item[1].phone.split(',')[0]));
-  }), (0, _react2.jsx)(_Box["default"], {
+  }), (0, _react2.jsx)(_index.Box, {
     sx: sx.inputWrapper
-  }, (0, _react2.jsx)(_Input["default"], {
+  }, (0, _react2.jsx)(_index.Input, {
     placeholder: "Phone number...",
     onChange: onPhoneNumberValueChange,
     value: phoneNumber

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

@@ -9,16 +9,14 @@ exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _DragVerticalIcon = _interopRequireDefault(require("mdi-react/DragVerticalIcon"));
 var _FormTextboxIcon = _interopRequireDefault(require("mdi-react/FormTextboxIcon"));
-var _Box = _interopRequireDefault(require("../components/Box"));
-var _Icon = _interopRequireDefault(require("../components/Icon"));
-var _Text = _interopRequireDefault(require("../components/Text"));
+var _index = require("../index");
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Recipes/Draggable Box'
 };
 exports["default"] = _default;
 var Default = function Default() {
-  return (0, _react2.jsx)(_Box["default"], {
+  return (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",
     py: "sm",
@@ -29,15 +27,15 @@ var Default = function Default() {
         cursor: 'grab'
       }
     }
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _DragVerticalIcon["default"],
     size: 22,
     color: "neutral.60"
-  }), (0, _react2.jsx)(_Icon["default"], {
+  }), (0, _react2.jsx)(_index.Icon, {
     icon: _FormTextboxIcon["default"],
     size: 22,
     ml: "sm"
-  }), (0, _react2.jsx)(_Text["default"], {
+  }), (0, _react2.jsx)(_index.Text, {
     fontWeight: 500,
     ml: "md"
   }, "Text Input"));

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

@@ -28,7 +28,6 @@ var _utils = require("@react-aria/utils");
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
 var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
-var _PopoverContainer = _interopRequireDefault(require("../components/PopoverContainer"));
 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); }
@@ -131,7 +130,7 @@ var Default = function Default() {
     mr: "sm",
     color: "active",
     size: 20
-  }), "Add a Form")), (0, _react2.jsx)(_PopoverContainer["default"], {
+  }), "Add a Form")), (0, _react2.jsx)(_index.PopoverContainer, {
     isOpen: isOpen,
     hasNoArrow: true,
     isNonModal: true,

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

@@ -53,7 +53,7 @@ var testData = [{
   id: '1',
   hasSeparator: false,
   hasInsetSeparator: true,
-  chipText: 'default',
+  badgeText: 'default',
   expirationText: 'Expiring On: 2022-12-08',
   childrenObjects: [{
     key: 'Staging Policy',
@@ -67,7 +67,7 @@ var testData = [{
   key: 'Policy4',
   name: 'Policy4',
   policyId: '9234890324k-124123asdf',
-  chipText: 'default',
+  badgeText: 'default',
   id: '2',
   hasSeparator: true
 }, {
@@ -269,9 +269,9 @@ var Default = function Default(_ref) {
   };
   var ExprirationBadge = function ExprirationBadge(props) {
     var expirationText = props.expirationText,
-      chipText = props.chipText;
+      badgeText = props.badgeText;
     return (0, _react2.jsx)(_index.Box, {
-      sx: !chipText && {
+      sx: !badgeText && {
         paddingLeft: '72px'
       },
       flexGrow: 1,
@@ -293,7 +293,7 @@ var Default = function Default(_ref) {
 
   // jsx of the production row
   var Production = function Production(props) {
-    var chipText = props.chipText,
+    var badgeText = props.badgeText,
       hasStaging = props.hasStaging,
       policyId = props.policyId,
       name = props.name;
@@ -330,12 +330,12 @@ var Default = function Default(_ref) {
         color: 'text.secondary',
         fontSize: 'sm'
       }
-    }, "Policy Id:", ' ', policyId)), chipText && (0, _react2.jsx)(DefaultBadge, null)), (0, _react2.jsx)(IconWithPopover, null));
+    }, "Policy Id:", ' ', policyId)), badgeText && (0, _react2.jsx)(DefaultBadge, null)), (0, _react2.jsx)(IconWithPopover, null));
   };
 
   // jsx of the staging row.
   var Staging = function Staging(props) {
-    var chipText = props.chipText,
+    var badgeText = props.badgeText,
       expirationText = props.expirationText,
       policyId = props.policyId,
       name = props.name;
@@ -371,7 +371,7 @@ var Default = function Default(_ref) {
         color: 'text.secondary',
         fontSize: 'sm'
       }
-    }, "Policy Id:", ' ', policyId))), chipText && (0, _react2.jsx)(DefaultBadge, null), expirationText && (0, _react2.jsx)(ExprirationBadge, {
+    }, "Policy Id:", ' ', policyId))), badgeText && (0, _react2.jsx)(DefaultBadge, null), expirationText && (0, _react2.jsx)(ExprirationBadge, {
       expirationText: expirationText
     }), (0, _react2.jsx)(IconWithPopover, null));
   };
@@ -392,7 +392,7 @@ var Default = function Default(_ref) {
               right: 0,
               bottom: 0,
               borderBottom: '1px solid',
-              borderBottomColor: 'line.hairline'
+              borderBottomColor: 'line.light'
             }
           }
         }

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

@@ -151,7 +151,8 @@ var sx = {
   },
   listElement: {
     wrapper: {
-      minHeight: '60px'
+      minHeight: '60px',
+      pl: '14px'
     },
     iconWrapper: {
       mr: 'auto',
@@ -165,7 +166,7 @@ var sx = {
     avatar: {
       width: '25px',
       height: '25px',
-      mr: 'md'
+      mr: '14px'
     },
     title: {
       alignSelf: 'start',
@@ -178,15 +179,57 @@ var sx = {
       alignSelf: 'start'
     },
     menuWrapper: {
-      alignSelf: 'center'
+      alignSelf: 'center',
+      pr: '4px'
     }
   }
 };
 var ListElement = function ListElement(_ref) {
   var item = _ref.item,
+    isHoverable = _ref.isHoverable,
     onClosePanel = _ref.onClosePanel;
-  return (0, _react2.jsx)(_index.Box, {
+  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);
+  };
+  return (0, _react2.jsx)(_index.ListItem, {
+    isHovered: isHoverable && isHovered,
     isRow: true,
+    onHoverEnd: handleHoveEnd,
+    onHoverStart: handleHoveStart,
+    onMouseMove: handleMouseMove,
+    ref: listItemRef,
     sx: sx.listElement.wrapper
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
@@ -215,7 +258,11 @@ var ListElement = function ListElement(_ref) {
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _MoreVertIcon["default"],
     size: "md"
-  })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_reactStately.Item, {
+  })), (0, _react2.jsx)(_index.Menu, {
+    onAction: handleHoveEnd,
+    onHoverEnd: handleMenuHoverEnd,
+    onHoverStart: handleHoveStart
+  }, (0, _react2.jsx)(_reactStately.Item, {
     key: "enable"
   }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
     key: "disable"
@@ -230,14 +277,14 @@ var ListElement = function ListElement(_ref) {
   }))));
 };
 var Default = function Default() {
-  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 _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 _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
     panelState = _useOverlayPanelState.state,
     onPanelClose = _useOverlayPanelState.onClose;
@@ -260,9 +307,7 @@ var Default = function Default() {
       closePanelHandler();
     }
   };
-  return (0, _react2.jsx)(_index.Box, {
-    sx: sx.wrapper
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+  var title = (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
     align: "center",
     isRow: true,
     mb: "xs",
@@ -289,7 +334,10 @@ var Default = function Default() {
     sx: {
       fontSize: '13px'
     }
-  }, " Learn more"))), (0, _react2.jsx)(_index.SearchField, {
+  }, " Learn more")));
+  return (0, _react2.jsx)(_index.Box, {
+    sx: sx.wrapper
+  }, title, (0, _react2.jsx)(_index.SearchField, {
     position: "fixed",
     mb: "lg",
     mt: "lg",
@@ -302,17 +350,19 @@ var Default = function Default() {
     items: items,
     onSelectionChange: selectItemHandler,
     ref: panelTriggerRef,
-    selectedKeys: selectedKeys
+    selectedKeys: selectedKeys,
+    isHoverable: false
   }, function (item) {
     return (0, _react2.jsx)(_reactStately.Item, {
       key: item.email,
       textValue: item.email,
-      hasSeparator: true,
+      hasSeparator: item.hasSeparator,
       listItemProps: {
-        pl: 15,
-        minHeight: 75
+        minHeight: 75,
+        padding: 1
       }
     }, (0, _react2.jsx)(ListElement, {
+      isHoverable: true,
       item: item
     }));
   }), (0, _react2.jsx)(_index.OverlayPanel, {

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

@@ -14,7 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.LogoTabs = void 0;
+exports["default"] = exports.Default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -137,7 +137,7 @@ var sx = {
     }
   })
 };
-var LogoTabs = function LogoTabs() {
+var Default = function Default() {
   var _useState = (0, _react.useState)('tab1'),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     currentTab = _useState2[0],
@@ -208,4 +208,4 @@ var LogoTabs = function LogoTabs() {
     sx: sx.tabStyling
   }, (0, _react2.jsx)(_index.Text, null, "This is content for the target tab"))));
 };
-exports.LogoTabs = LogoTabs;
+exports.Default = Default;

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

@@ -7,7 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _CheckboxField = _interopRequireDefault(require("../components/CheckboxField"));
+var _index = require("../index");
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Recipes/Neutral Checkbox Field'
@@ -19,7 +19,7 @@ var sx = {
   }
 };
 var Default = function Default() {
-  return (0, _react2.jsx)(_CheckboxField["default"], {
+  return (0, _react2.jsx)(_index.CheckboxField, {
     controlProps: {
       sx: sx.checkboxColor
     },