@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.4

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

@@ -1,73 +1,40 @@
 "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 _filterInstanceProperty = 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
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-
 var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
-
 var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
-
 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 _react = _interopRequireWildcard(require("react"));
-
+var _reactAria = require("react-aria");
+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 _reactAria = require("react-aria");
-
-var _utils = require("@react-aria/utils");
-
-var _index = require("../index");
-
 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); }
-
 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 = _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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var _default = {
   title: 'Recipes/Flippable Caret Menu Button'
 };
@@ -107,62 +74,50 @@ var sx = {
     fontSize: '13px'
   }
 };
-
 var Default = function Default() {
   var buttonRef = (0, _react.useRef)();
   var popoverRef = (0, _react.useRef)();
-
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   var _useState3 = (0, _react.useState)([]),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      selectedButtons = _useState4[0],
-      setSelectedButton = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    selectedButtons = _useState4[0],
+    setSelectedButton = _useState4[1];
   var onChange = function onChange() {
     setIsOpen(!isOpen);
   };
-
   var toggleButton = function toggleButton(key) {
     var _context;
-
     var newState = selectedButtons;
-
     if ((0, _includes["default"])(selectedButtons).call(selectedButtons, key)) {
       var index = (0, _indexOf["default"])(newState).call(newState, key);
       (0, _splice["default"])(newState).call(newState, index, 1);
     } else {
       newState.push(key);
     }
-
     setSelectedButton((0, _concat["default"])(_context = []).call(_context, newState));
   };
-
   var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
-    targetRef: buttonRef,
-    overlayRef: popoverRef,
-    placement: 'bottom left',
-    isOpen: true
-  }),
-      overlayProps = _useOverlayPosition.overlayProps,
-      placement = _useOverlayPosition.placement,
-      updatePosition = _useOverlayPosition.updatePosition;
-
+      targetRef: buttonRef,
+      overlayRef: popoverRef,
+      placement: 'bottom left',
+      isOpen: true
+    }),
+    overlayProps = _useOverlayPosition.overlayProps,
+    placement = _useOverlayPosition.placement,
+    updatePosition = _useOverlayPosition.updatePosition;
   (0, _utils.useLayoutEffect)(function () {
     requestAnimationFrame(function () {
       updatePosition();
     });
   }, [updatePosition]);
-
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: '500px',
     minWidth: '500px',
     height: '200px'
   });
-
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, {
     ref: buttonRef,
     variant: "inline",
@@ -206,5 +161,4 @@ var Default = function Default() {
     }, item);
   })))));
 };
-
 exports.Default = Default;

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

@@ -1,45 +1,27 @@
 "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$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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
-
 var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
-
 var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
-
 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 _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; }
-
 var _default = {
   title: 'Recipes/LinkedListView',
   argTypes: {
@@ -93,7 +75,9 @@ var testData = [{
   name: 'Policy5',
   policyId: 'asdf23zaa-124123asdf',
   id: '3'
-}]; // IMPORTANT PLEASE READ
+}];
+
+// IMPORTANT PLEASE READ
 // in order for the list portion of this recipe to function correctly,
 // the array of objects that will be used to create
 // the production and staging rows, will need to be flat and sorted.
@@ -107,7 +91,6 @@ var flattenArray = function flattenArray(array) {
   (0, _forEach["default"])(newArray).call(newArray, function (item) {
     if (item.childrenObjects) {
       var _context;
-
       (0, _forEach["default"])(_context = item.childrenObjects).call(_context, function (obj) {
         var newObj = obj;
         newObj.parentId = item.id;
@@ -117,7 +100,6 @@ var flattenArray = function flattenArray(array) {
   });
   return newArray;
 };
-
 var testSort = function testSort(array) {
   var newArray = array;
   (0, _forEach["default"])(newArray).call(newArray, function (item, i) {
@@ -131,20 +113,16 @@ var testSort = function testSort(array) {
   });
   return newArray;
 };
-
 var unsorted = flattenArray(testData);
 var sorted = testSort(unsorted);
-
 var Default = function Default(_ref) {
   var _context2;
-
-  var args = (0, _extends2["default"])({}, _ref);
-
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
   var _useState = (0, _react.useState)((0, _concat["default"])(_context2 = []).call(_context2, sorted)),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-      theseItems = _useState2[0]; // svg of the bottom portion of the bracket, the portion with the L shaped hook.
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+    theseItems = _useState2[0];
 
+  // svg of the bottom portion of the bracket, the portion with the L shaped hook.
   var BottomBracket = function BottomBracket() {
     var color = '#CACED3';
     return (0, _react2.jsx)(_index.Box, {
@@ -196,9 +174,9 @@ var Default = function Default(_ref) {
       fill: "white",
       transform: "translate(-280 -419)"
     }))))));
-  }; // the top portion of the bracket svg, this is basically just a straight vertical line.
-
+  };
 
+  // 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, {
@@ -228,9 +206,9 @@ var Default = function Default(_ref) {
       stroke: color,
       fill: "none"
     }))));
-  }; // the vector shield and key icon.
-
+  };
 
+  // the vector shield and key icon.
   var ShieldVector = function ShieldVector(props) {
     return (0, _react2.jsx)("svg", (0, _extends2["default"])({
       width: "19",
@@ -240,9 +218,9 @@ var Default = function Default(_ref) {
     }, 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
-
+  };
 
+  // reusable piece of code that handles the iconbutton and popover on the right side of the rows
   var IconWithPopover = function IconWithPopover() {
     return (0, _react2.jsx)(_index.PopoverMenu, {
       direction: "left"
@@ -274,9 +252,9 @@ var Default = function Default(_ref) {
     }, (0, _react2.jsx)(_index.Text, {
       color: "critical.bright"
     }, "Delete"))));
-  }; // made these separate components because staging and production both use them.
-
+  };
 
+  // made these separate components because staging and production both use them.
   var DefaultBadge = function DefaultBadge() {
     return (0, _react2.jsx)(_index.Badge, {
       label: "Default",
@@ -289,10 +267,9 @@ var Default = function Default(_ref) {
       }
     });
   };
-
   var ExprirationBadge = function ExprirationBadge(props) {
     var expirationText = props.expirationText,
-        chipText = props.chipText;
+      chipText = props.chipText;
     return (0, _react2.jsx)(_index.Box, {
       sx: !chipText && {
         paddingLeft: '72px'
@@ -312,14 +289,14 @@ var Default = function Default(_ref) {
       textColor: "text.primary",
       label: expirationText
     }));
-  }; // jsx of the production row
-
+  };
 
+  // jsx of the production row
   var Production = function Production(props) {
     var chipText = props.chipText,
-        hasStaging = props.hasStaging,
-        policyId = props.policyId,
-        name = props.name;
+      hasStaging = props.hasStaging,
+      policyId = props.policyId,
+      name = props.name;
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
       height: "75px"
@@ -353,15 +330,15 @@ var Default = function Default(_ref) {
         color: 'text.secondary',
         fontSize: 'sm'
       }
-    }, "Policy Id: ", policyId)), chipText && (0, _react2.jsx)(DefaultBadge, null)), (0, _react2.jsx)(IconWithPopover, null));
-  }; // jsx of the staging row.
-
+    }, "Policy Id:", ' ', policyId)), chipText && (0, _react2.jsx)(DefaultBadge, null)), (0, _react2.jsx)(IconWithPopover, null));
+  };
 
+  // jsx of the staging row.
   var Staging = function Staging(props) {
     var chipText = props.chipText,
-        expirationText = props.expirationText,
-        policyId = props.policyId,
-        name = props.name;
+      expirationText = props.expirationText,
+      policyId = props.policyId,
+      name = props.name;
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
       height: "75px",
@@ -394,11 +371,10 @@ 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))), chipText && (0, _react2.jsx)(DefaultBadge, null), expirationText && (0, _react2.jsx)(ExprirationBadge, {
       expirationText: expirationText
     }), (0, _react2.jsx)(IconWithPopover, null));
   };
-
   return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.ListView, (0, _extends2["default"])({}, args, {
     items: theseItems
   }), function (item) {
@@ -428,5 +404,4 @@ var Default = function Default(_ref) {
     }, item)));
   }));
 };
-
 exports.Default = Default;

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

@@ -1,53 +1,29 @@
 "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$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 _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
+var _reactAria = require("react-aria");
+var _reactStately = require("react-stately");
 var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
-
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
-
 var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
-
 var _PencilIcon = _interopRequireDefault(require("mdi-react/PencilIcon"));
-
 var _PlusIcon = _interopRequireDefault(require("mdi-react/PlusIcon"));
-
-var _reactAria = require("react-aria");
-
-var _reactStately = require("react-stately");
-
-var _index = require("../index");
-
 var _hooks = require("../hooks");
-
-var _images = require("../utils/devUtils/constants/images");
-
+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; }
-
 var _default = {
   title: 'Recipes/List with Panel'
 };
@@ -62,12 +38,14 @@ var items = [{
   email: 'idixie2@elegantthemes.com',
   firstName: 'Cacilia',
   lastName: 'Dixie',
-  avatar: _images.pingImg
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
 }, {
   email: 'dfowler0@rambler.ru',
   firstName: 'Stavro',
   lastName: 'Fowler',
-  avatar: _images.pingImg
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
 }, {
   email: 'jgolde8@jimdo.com',
   firstName: 'Celisse',
@@ -127,8 +105,7 @@ var items = [{
   firstName: 'Andromache',
   lastName: 'Idel',
   hasIcon: true,
-  avatar: _AccountIcon["default"],
-  hasSeparator: false
+  avatar: _AccountIcon["default"]
 }];
 var sx = {
   wrapper: {
@@ -181,7 +158,7 @@ var sx = {
       alignItems: 'center'
     },
     icon: {
-      mr: 'sm',
+      mr: 'md',
       alignSelf: 'center',
       color: 'accent.40'
     },
@@ -191,7 +168,8 @@ var sx = {
       mr: 'md'
     },
     title: {
-      alignSelf: 'start'
+      alignSelf: 'start',
+      fontSize: 'md'
     },
     subtitle: {
       fontSize: 'sm',
@@ -204,27 +182,23 @@ var sx = {
     }
   }
 };
-
 var ListElement = function ListElement(_ref) {
   var item = _ref.item,
-      onClosePanel = _ref.onClosePanel;
+    onClosePanel = _ref.onClosePanel;
   return (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: sx.listElement.wrapper
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: sx.listElement.iconWrapper
-  }, item.hasIcon ? (0, _react2.jsx)(_index.Icon, {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: item.avatar,
-    size: 24,
+    size: "md",
     sx: sx.listElement.icon
-  }) : (0, _react2.jsx)(_index.Avatar, {
-    sx: sx.listElement.avatar,
-    src: item.avatar
   }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
     variant: "bodyStrong",
     sx: sx.listElement.title
-  }, item.lastName, ", ", item.firstName), (0, _react2.jsx)(_index.Text, {
+  }, item.lastName, ",", ' ', item.firstName), (0, _react2.jsx)(_index.Text, {
     variant: "subtitle",
     sx: sx.listElement.subtitle
   }, item.email))), (0, _react2.jsx)(_index.Box, {
@@ -240,8 +214,7 @@ var ListElement = function ListElement(_ref) {
     mr: onClosePanel ? 'sm' : 0
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _MoreVertIcon["default"],
-    color: "white",
-    size: "sm"
+    size: "md"
   })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_reactStately.Item, {
     key: "enable"
   }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
@@ -256,32 +229,26 @@ var ListElement = function ListElement(_ref) {
     icon: _CloseIcon["default"]
   }))));
 };
-
 var Default = function Default() {
   var _useState = (0, _react.useState)(),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      selectedItemId = _useState2[0],
-      setSelectedItemId = _useState2[1];
-
+    _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];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    selectedKeys = _useState4[0],
+    setSelectedKeys = _useState4[1];
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
-      panelState = _useOverlayPanelState.state,
-      onPanelClose = _useOverlayPanelState.onClose;
-
+    panelState = _useOverlayPanelState.state,
+    onPanelClose = _useOverlayPanelState.onClose;
   var panelTriggerRef = (0, _react.useRef)();
-  var heading = 'Title of the Page';
+  var heading = 'Users';
   var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
-
   var closePanelHandler = function closePanelHandler() {
     onPanelClose(panelState, panelTriggerRef);
     setSelectedItemId(-1);
     setSelectedKeys([]);
   };
-
   var selectItemHandler = function selectItemHandler(e) {
     if (e.size) {
       setSelectedItemId((0, _findIndex["default"])(items).call(items, function (item) {
@@ -293,31 +260,30 @@ var Default = function Default() {
       closePanelHandler();
     }
   };
-
   return (0, _react2.jsx)(_index.Box, {
     sx: sx.wrapper
-  }, (0, _react2.jsx)(_index.Box, {
-    mb: "md"
-  }, (0, _react2.jsx)(_index.Box, {
+  }, (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)(_index.Text, {
-    variant: "title",
-    fontWeight: 3
+    fontSize: "xx",
+    fontWeight: 3,
+    fontColor: "text.primary"
   }, heading), (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "icon button",
     ml: "sm",
-    mt: "3px",
     variant: "inverted"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
-    color: "white",
-    size: "xs"
+    size: "sm"
   }))), (0, _react2.jsx)(_index.Text, {
-    variant: "bodyWeak"
+    fontSize: "sm",
+    color: "text.secondary",
+    fontWeight: 0,
+    width: "800px"
   }, description, (0, _react2.jsx)(_index.Link, {
     href: "https://uilibrary.ping-eng.com/",
     sx: {
@@ -325,10 +291,13 @@ var Default = function Default() {
     }
   }, " Learn more"))), (0, _react2.jsx)(_index.SearchField, {
     position: "fixed",
-    mb: "sm",
+    mb: "lg",
+    mt: "lg",
     width: "400px",
     placeholder: "Search",
     "aria-label": "search"
+  }), (0, _react2.jsx)(_index.Separator, {
+    margin: 0
   }), (0, _react2.jsx)(_index.ListView, {
     items: items,
     onSelectionChange: selectItemHandler,
@@ -338,7 +307,7 @@ var Default = function Default() {
     return (0, _react2.jsx)(_reactStately.Item, {
       key: item.email,
       textValue: item.email,
-      hasSeparator: item.hasSeparator,
+      hasSeparator: true,
       listItemProps: {
         pl: 15,
         minHeight: 75
@@ -352,7 +321,7 @@ var Default = function Default() {
     triggerRef: panelTriggerRef,
     p: 0,
     size: "large"
-  }, panelState.isOpen && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_reactAria.FocusScope, {
+  }, panelState.isOpen && (0, _react2.jsx)(_reactAria.FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: true
@@ -389,7 +358,7 @@ var Default = function Default() {
   }, "Full Name"), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
+  }, items[selectedItemId].firstName, ' ', items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemLabel,
     variant: "base"
   }, "First Name"), (0, _react2.jsx)(_index.Text, {
@@ -411,7 +380,6 @@ var Default = function Default() {
     title: "Group Memberships"
   }, (0, _react2.jsx)(_index.Text, null, "Group Memberships")), (0, _react2.jsx)(_index.Tab, {
     title: "Account Info"
-  }, (0, _react2.jsx)(_index.Text, null, "Account Info"))))))));
+  }, (0, _react2.jsx)(_index.Text, null, "Account Info")))))));
 };
-
 exports.Default = Default;