@pingux/astro 2.0.0-alpha.6 → 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));
   };

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

@@ -20,7 +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 _ = 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; }
@@ -223,7 +223,7 @@ var ListElement = function ListElement(_ref) {
   var handleHoveStart = function handleHoveStart() {
     setIsHovered(true);
   };
-  return (0, _react2.jsx)(_.ListItem, {
+  return (0, _react2.jsx)(_index.ListItem, {
     isHovered: isHoverable && isHovered,
     isRow: true,
     onHoverEnd: handleHoveEnd,
@@ -231,34 +231,34 @@ var ListElement = function ListElement(_ref) {
     onMouseMove: handleMouseMove,
     ref: listItemRef,
     sx: sx.listElement.wrapper
-  }, (0, _react2.jsx)(_.Box, {
+  }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: sx.listElement.iconWrapper
-  }, (0, _react2.jsx)(_.Icon, {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: item.avatar,
     size: "md",
     sx: sx.listElement.icon
-  }), (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Text, {
+  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
     variant: "bodyStrong",
     sx: sx.listElement.title
-  }, item.lastName, ",", ' ', item.firstName), (0, _react2.jsx)(_.Text, {
+  }, item.lastName, ",", ' ', item.firstName), (0, _react2.jsx)(_index.Text, {
     variant: "subtitle",
     sx: sx.listElement.subtitle
-  }, item.email))), (0, _react2.jsx)(_.Box, {
+  }, item.email))), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: sx.listElement.menuWrapper
-  }, (0, _react2.jsx)(_.SwitchField, {
+  }, (0, _react2.jsx)(_index.SwitchField, {
     "aria-label": "active user",
     isDefaultSelected: true,
     alignSelf: "center",
     mr: "sm"
-  }), (0, _react2.jsx)(_.PopoverMenu, null, (0, _react2.jsx)(_.IconButton, {
+  }), (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "more icon button",
     mr: onClosePanel ? 'sm' : 0
-  }, (0, _react2.jsx)(_.Icon, {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _MoreVertIcon["default"],
     size: "md"
-  })), (0, _react2.jsx)(_.Menu, {
+  })), (0, _react2.jsx)(_index.Menu, {
     onAction: handleHoveEnd,
     onHoverEnd: handleMenuHoverEnd,
     onHoverStart: handleHoveStart
@@ -268,10 +268,10 @@ var ListElement = function ListElement(_ref) {
     key: "disable"
   }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
     key: "delete"
-  }, "Delete user"))), onClosePanel && (0, _react2.jsx)(_.IconButton, {
+  }, "Delete user"))), onClosePanel && (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "close icon button",
     onPress: onClosePanel
-  }, (0, _react2.jsx)(_.Icon, {
+  }, (0, _react2.jsx)(_index.Icon, {
     size: "sm",
     icon: _CloseIcon["default"]
   }))));
@@ -307,46 +307,46 @@ var Default = function Default() {
       closePanelHandler();
     }
   };
-  var title = (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Box, {
+  var title = (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
     align: "center",
     isRow: true,
     mb: "xs",
     role: "heading",
     "aria-level": "1"
-  }, (0, _react2.jsx)(_.Text, {
+  }, (0, _react2.jsx)(_index.Text, {
     fontSize: "xx",
     fontWeight: 3,
     fontColor: "text.primary"
-  }, heading), (0, _react2.jsx)(_.IconButton, {
+  }, heading), (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "icon button",
     ml: "sm",
     variant: "inverted"
-  }, (0, _react2.jsx)(_.Icon, {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
     size: "sm"
-  }))), (0, _react2.jsx)(_.Text, {
+  }))), (0, _react2.jsx)(_index.Text, {
     fontSize: "sm",
     color: "text.secondary",
     fontWeight: 0,
     width: "800px"
-  }, description, (0, _react2.jsx)(_.Link, {
+  }, description, (0, _react2.jsx)(_index.Link, {
     href: "https://uilibrary.ping-eng.com/",
     sx: {
       fontSize: '13px'
     }
   }, " Learn more")));
-  return (0, _react2.jsx)(_.Box, {
+  return (0, _react2.jsx)(_index.Box, {
     sx: sx.wrapper
-  }, title, (0, _react2.jsx)(_.SearchField, {
+  }, title, (0, _react2.jsx)(_index.SearchField, {
     position: "fixed",
     mb: "lg",
     mt: "lg",
     width: "400px",
     placeholder: "Search",
     "aria-label": "search"
-  }), (0, _react2.jsx)(_.Separator, {
+  }), (0, _react2.jsx)(_index.Separator, {
     margin: 0
-  }), (0, _react2.jsx)(_.ListView, {
+  }), (0, _react2.jsx)(_index.ListView, {
     items: items,
     onSelectionChange: selectItemHandler,
     ref: panelTriggerRef,
@@ -365,7 +365,7 @@ var Default = function Default() {
       isHoverable: true,
       item: item
     }));
-  }), (0, _react2.jsx)(_.OverlayPanel, {
+  }), (0, _react2.jsx)(_index.OverlayPanel, {
     isOpen: panelState.isOpen,
     state: panelState,
     triggerRef: panelTriggerRef,
@@ -375,17 +375,17 @@ var Default = function Default() {
     contain: true,
     restoreFocus: true,
     autoFocus: true
-  }, (0, _react2.jsx)(_.Box, {
+  }, (0, _react2.jsx)(_index.Box, {
     sx: sx.listElementWrapper
   }, (0, _react2.jsx)(ListElement, {
     item: selectedItemId >= 0 ? items[selectedItemId] : [],
     onClosePanel: closePanelHandler
-  })), (0, _react2.jsx)(_.Separator, {
+  })), (0, _react2.jsx)(_index.Separator, {
     margin: 0,
     sx: sx.separator
-  }), (0, _react2.jsx)(_.Box, {
+  }), (0, _react2.jsx)(_index.Box, {
     sx: sx.tabsWrapper
-  }, (0, _react2.jsx)(_.Tabs, {
+  }, (0, _react2.jsx)(_index.Tabs, {
     tabListProps: {
       justifyContent: 'center'
     },
@@ -394,42 +394,42 @@ var Default = function Default() {
         position: 'relative'
       }
     }
-  }, (0, _react2.jsx)(_.Tab, {
+  }, (0, _react2.jsx)(_index.Tab, {
     title: "Profile"
-  }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.IconButton, {
+  }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
     variant: "inverted",
     "aria-label": "pencil icon button",
     sx: sx.iconButton
   }, (0, _react2.jsx)(_PencilIcon["default"], {
     size: 20
-  })), (0, _react2.jsx)(_.Text, {
+  })), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemLabel,
     variant: "base"
-  }, "Full Name"), (0, _react2.jsx)(_.Text, {
+  }, "Full Name"), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].firstName, ' ', items[selectedItemId].lastName), (0, _react2.jsx)(_.Text, {
+  }, items[selectedItemId].firstName, ' ', items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemLabel,
     variant: "base"
-  }, "First Name"), (0, _react2.jsx)(_.Text, {
+  }, "First Name"), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].firstName), (0, _react2.jsx)(_.Text, {
+  }, items[selectedItemId].firstName), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemLabel,
     variant: "base"
-  }, "Last Name"), (0, _react2.jsx)(_.Text, {
+  }, "Last Name"), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].lastName), (0, _react2.jsx)(_.Text, {
+  }, items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemLabel,
     variant: "base"
-  }, "Email"), (0, _react2.jsx)(_.Text, {
+  }, "Email"), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].email))), (0, _react2.jsx)(_.Tab, {
+  }, items[selectedItemId].email))), (0, _react2.jsx)(_index.Tab, {
     title: "Group Memberships"
-  }, (0, _react2.jsx)(_.Text, null, "Group Memberships")), (0, _react2.jsx)(_.Tab, {
+  }, (0, _react2.jsx)(_index.Text, null, "Group Memberships")), (0, _react2.jsx)(_index.Tab, {
     title: "Account Info"
-  }, (0, _react2.jsx)(_.Text, null, "Account Info")))))));
+  }, (0, _react2.jsx)(_index.Text, null, "Account Info")))))));
 };
 exports.Default = Default;