@pingux/astro 1.42.0 → 1.42.1-alpha.1

package/lib/cjs/components/Stepper/Step.js

@@ -14,7 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.CollectionStep = void 0;
+exports["default"] = void 0;
 
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 
@@ -28,8 +28,6 @@ var _CheckBoldIcon = _interopRequireDefault(require("mdi-react/CheckBoldIcon"));
 
 var _interactions = require("@react-aria/interactions");
 
-var _collections = require("@react-stately/collections");
-
 var _Stepper = require("./Stepper.constants");
 
 var _index = require("../../index");
@@ -42,7 +40,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var COMPLETED = _Stepper.stepStatuses.COMPLETED,
     INACTIVE = _Stepper.stepStatuses.INACTIVE;
-var CollectionStep = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var status = props.status,
       value = props.value;
 
@@ -59,14 +57,13 @@ var CollectionStep = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     color: "text.primaryLight"
   }) : value);
 });
-exports.CollectionStep = CollectionStep;
-CollectionStep.propTypes = {
+Step.propTypes = {
   status: _propTypes["default"].oneOf((0, _values["default"])(_Stepper.stepStatuses)),
   value: _propTypes["default"].number
 };
-CollectionStep.defaultProps = {
+Step.defaultProps = {
   status: INACTIVE,
   value: 0
 };
-var _default = _collections.Item;
+var _default = Step;
 exports["default"] = _default;

package/lib/cjs/components/Stepper/Stepper.js

@@ -50,14 +50,10 @@ var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/p
 
 var _Stepper = require("./Stepper.constants");
 
-var _Step = require("./Step");
+var _ = require("../..");
 
 var _Line = _interopRequireDefault(require("./Line"));
 
-var _Tab = _interopRequireDefault(require("../Tab"));
-
-var _Tabs = _interopRequireDefault(require("../Tabs"));
-
 var _react2 = require("@emotion/react");
 
 var _excluded = ["activeStep", "onStepChange", "tabListProps"];
@@ -113,14 +109,14 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var render = (0, _map["default"])(steps).call(steps, function (item, i) {
     var stepIndex = i + 1;
     var stepStatus = getStatus(stepIndex);
-    var step = (0, _react2.jsx)(_Step.CollectionStep, {
+    var step = (0, _react2.jsx)(_.Step, {
       key: item.key,
       value: stepIndex,
       status: stepStatus
     });
     var line = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _isArray["default"])(lines) ? lines[i - 1] : lines);
     var textValue = item && item.value && item.value.label || item.textValue || stepIndex.toString();
-    var container = (0, _react2.jsx)(_Tab["default"], {
+    var container = (0, _react2.jsx)(_.Tab, {
       key: stepIndex,
       variant: "stepper.tab",
       tabLineProps: {
@@ -138,7 +134,7 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isFirst = isFirst && !container;
     return container;
   });
-  return (0, _react2.jsx)(_Tabs["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.Tabs, (0, _extends2["default"])({
     ref: ref,
     variant: "stepper.wrapper",
     tabListProps: _objectSpread({

package/lib/cjs/components/Stepper/Stepper.stories.js

@@ -20,6 +20,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _collections = require("@react-stately/collections");
+
 var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
@@ -89,12 +91,12 @@ var steps = [{
 }];
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_index.Stepper, args, (0, _react2.jsx)(_index.Step, {
+  return (0, _react2.jsx)(_index.Stepper, args, (0, _react2.jsx)(_collections.Item, {
     key: "step1",
     textValue: "Step 1"
   }, (0, _react2.jsx)(_index.Text, {
     pt: "lg"
-  }, "This is content for step 1")), (0, _react2.jsx)(_index.Step, {
+  }, "This is content for step 1")), (0, _react2.jsx)(_collections.Item, {
     key: "step2",
     textValue: "Step 2"
   }, (0, _react2.jsx)(_index.Text, {
@@ -120,7 +122,7 @@ var ControlledStepper = function ControlledStepper() {
     activeStep: activeStep,
     onStepChange: setActiveStep
   }, function (item) {
-    return (0, _react2.jsx)(_index.Step, {
+    return (0, _react2.jsx)(_collections.Item, {
       key: item.name,
       textValue: item.name
     }, (0, _react2.jsx)(_index.Text, {
@@ -132,13 +134,13 @@ var ControlledStepper = function ControlledStepper() {
 exports.ControlledStepper = ControlledStepper;
 
 var WithoutContent = function WithoutContent() {
-  return (0, _react2.jsx)(_index.Stepper, null, (0, _react2.jsx)(_index.Step, {
+  return (0, _react2.jsx)(_index.Stepper, null, (0, _react2.jsx)(_collections.Item, {
     key: "step1",
     textValue: "Step 1"
-  }), (0, _react2.jsx)(_index.Step, {
+  }), (0, _react2.jsx)(_collections.Item, {
     key: "step2",
     textValue: "Step 2"
-  }), (0, _react2.jsx)(_index.Step, {
+  }), (0, _react2.jsx)(_collections.Item, {
     key: "step3",
     textValue: "Step 3"
   }));

package/lib/cjs/components/Stepper/Stepper.test.js

@@ -24,6 +24,8 @@ var _react2 = require("@emotion/react");
 
 var _cache = _interopRequireDefault(require("@emotion/cache"));
 
+var _collections = require("@react-stately/collections");
+
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
@@ -32,8 +34,6 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _Stepper = _interopRequireDefault(require("./Stepper"));
 
-var _Step = _interopRequireDefault(require("./Step"));
-
 // Emotion Cache added as test fails otherwise, root cause of this failure is unknown.
 // Failure occured with ThemeUI refactor.
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-557726922
@@ -73,7 +73,7 @@ var getComponent = function getComponent() {
   }, (0, _react2.jsx)(_Stepper["default"], (0, _extends2["default"])({}, defaultProps, props), function (_ref2) {
     var name = _ref2.name,
         children = _ref2.children;
-    return (0, _react2.jsx)(_Step["default"], {
+    return (0, _react2.jsx)(_collections.Item, {
       key: name || children,
       textValue: name || children
     }, (0, _react2.jsx)(_Text["default"], null, children));

package/lib/cjs/index.js

@@ -88,6 +88,7 @@ var _exportNames = {
   SelectField: true,
   Separator: true,
   Stepper: true,
+  Step: true,
   Switch: true,
   SwitchField: true,
   Tab: true,
@@ -643,6 +644,13 @@ _Object$defineProperty(exports, "Separator", {
   }
 });
 
+_Object$defineProperty(exports, "Step", {
+  enumerable: true,
+  get: function get() {
+    return _Stepper.Step;
+  }
+});
+
 _Object$defineProperty(exports, "Stepper", {
   enumerable: true,
   get: function get() {

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

@@ -40,8 +40,6 @@ var _index = require("../index");
 
 var _hooks = require("../hooks");
 
-var _images = require("../utils/devUtils/constants/images");
-
 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); }
@@ -62,12 +60,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 +127,7 @@ var items = [{
   firstName: 'Andromache',
   lastName: 'Idel',
   hasIcon: true,
-  avatar: _AccountIcon["default"],
-  hasSeparator: false
+  avatar: _AccountIcon["default"]
 }];
 var sx = {
   wrapper: {
@@ -181,7 +180,7 @@ var sx = {
       alignItems: 'center'
     },
     icon: {
-      mr: 'sm',
+      mr: 'md',
       alignSelf: 'center',
       color: 'accent.40'
     },
@@ -191,7 +190,8 @@ var sx = {
       mr: 'md'
     },
     title: {
-      alignSelf: 'start'
+      alignSelf: 'start',
+      fontSize: 'md'
     },
     subtitle: {
       fontSize: 'sm',
@@ -214,13 +214,10 @@ var ListElement = function ListElement(_ref) {
   }, (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
@@ -240,8 +237,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)(_collections.Item, {
     key: "enable"
   }, "Enable user"), (0, _react2.jsx)(_collections.Item, {
@@ -273,7 +269,7 @@ var Default = function Default() {
       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() {
@@ -296,28 +292,28 @@ var Default = function Default() {
 
   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 +321,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 +337,7 @@ var Default = function Default() {
     return (0, _react2.jsx)(_collections.Item, {
       key: item.email,
       textValue: item.email,
-      hasSeparator: item.hasSeparator,
+      hasSeparator: true,
       listItemProps: {
         pl: 15,
         minHeight: 75

package/lib/components/Stepper/Step.js

@@ -4,13 +4,12 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import CheckBoldIcon from 'mdi-react/CheckBoldIcon';
 import { useHover } from '@react-aria/interactions';
-import { Item as Step } from '@react-stately/collections';
 import { stepStatuses } from './Stepper.constants';
 import { Box, Icon } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var COMPLETED = stepStatuses.COMPLETED,
     INACTIVE = stepStatuses.INACTIVE;
-export var CollectionStep = /*#__PURE__*/forwardRef(function (props, ref) {
+var Step = /*#__PURE__*/forwardRef(function (props, ref) {
   var status = props.status,
       value = props.value;
 
@@ -27,11 +26,11 @@ export var CollectionStep = /*#__PURE__*/forwardRef(function (props, ref) {
     color: "text.primaryLight"
   }) : value);
 });
-CollectionStep.propTypes = {
+Step.propTypes = {
   status: PropTypes.oneOf(_Object$values(stepStatuses)),
   value: PropTypes.number
 };
-CollectionStep.defaultProps = {
+Step.defaultProps = {
   status: INACTIVE,
   value: 0
 };

package/lib/components/Stepper/Stepper.js

@@ -23,10 +23,8 @@ import PropTypes from 'prop-types';
 import { useSingleSelectListState } from '@react-stately/list';
 import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
 import { stepStatuses } from './Stepper.constants';
-import { CollectionStep } from './Step';
+import { Step, Tab, Tabs } from '../..';
 import Line from './Line';
-import Tab from '../Tab';
-import Tabs from '../Tabs';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ACTIVE = stepStatuses.ACTIVE,
     COMPLETED = stepStatuses.COMPLETED,
@@ -75,7 +73,7 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
     var stepIndex = i + 1;
     var stepStatus = getStatus(stepIndex);
 
-    var step = ___EmotionJSX(CollectionStep, {
+    var step = ___EmotionJSX(Step, {
       key: item.key,
       value: stepIndex,
       status: stepStatus

package/lib/components/Stepper/Stepper.stories.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
-import { Stepper, Step, Text } from '../../index';
+import { Item } from '@react-stately/collections';
+import { Stepper, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Stepper',
@@ -61,12 +62,12 @@ var steps = [{
   name: 'step3'
 }];
 export var Default = function Default(args) {
-  return ___EmotionJSX(Stepper, args, ___EmotionJSX(Step, {
+  return ___EmotionJSX(Stepper, args, ___EmotionJSX(Item, {
     key: "step1",
     textValue: "Step 1"
   }, ___EmotionJSX(Text, {
     pt: "lg"
-  }, "This is content for step 1")), ___EmotionJSX(Step, {
+  }, "This is content for step 1")), ___EmotionJSX(Item, {
     key: "step2",
     textValue: "Step 2"
   }, ___EmotionJSX(Text, {
@@ -89,7 +90,7 @@ export var ControlledStepper = function ControlledStepper() {
     activeStep: activeStep,
     onStepChange: setActiveStep
   }, function (item) {
-    return ___EmotionJSX(Step, {
+    return ___EmotionJSX(Item, {
       key: item.name,
       textValue: item.name
     }, ___EmotionJSX(Text, {
@@ -98,13 +99,13 @@ export var ControlledStepper = function ControlledStepper() {
   });
 };
 export var WithoutContent = function WithoutContent() {
-  return ___EmotionJSX(Stepper, null, ___EmotionJSX(Step, {
+  return ___EmotionJSX(Stepper, null, ___EmotionJSX(Item, {
     key: "step1",
     textValue: "Step 1"
-  }), ___EmotionJSX(Step, {
+  }), ___EmotionJSX(Item, {
     key: "step2",
     textValue: "Step 2"
-  }), ___EmotionJSX(Step, {
+  }), ___EmotionJSX(Item, {
     key: "step3",
     textValue: "Step 3"
   }));

package/lib/components/Stepper/Stepper.test.js

@@ -9,11 +9,11 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
+import { Item } from '@react-stately/collections';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen, fireEvent } from '../../utils/testUtils/testWrapper';
 import Text from '../Text';
-import Stepper from './Stepper';
-import Step from './Step'; // Emotion Cache added as test fails otherwise, root cause of this failure is unknown.
+import Stepper from './Stepper'; // Emotion Cache added as test fails otherwise, root cause of this failure is unknown.
 // Failure occured with ThemeUI refactor.
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-557726922
 
@@ -54,7 +54,7 @@ var getComponent = function getComponent() {
   }, ___EmotionJSX(Stepper, _extends({}, defaultProps, props), function (_ref2) {
     var name = _ref2.name,
         children = _ref2.children;
-    return ___EmotionJSX(Step, {
+    return ___EmotionJSX(Item, {
       key: name || children,
       textValue: name || children
     }, ___EmotionJSX(Text, null, children));

package/lib/index.js

@@ -122,7 +122,7 @@ export { default as SelectField } from './components/SelectField';
 export * from './components/SelectField';
 export { default as Separator } from './components/Separator';
 export * from './components/Separator';
-export { default as Stepper } from './components/Stepper';
+export { default as Stepper, Step } from './components/Stepper';
 export * from './components/Stepper';
 export { default as Switch } from './components/Switch';
 export * from './components/Switch';

package/lib/recipes/ListAndPanel.stories.js

@@ -8,9 +8,8 @@ import CloseIcon from 'mdi-react/CloseIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
 import PencilIcon from 'mdi-react/PencilIcon';
 import PlusIcon from 'mdi-react/PlusIcon';
-import { Avatar, Box, Icon, IconButton, Link, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
+import { Box, Icon, IconButton, Link, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
 import { useOverlayPanelState } from '../hooks';
-import { pingImg } from '../utils/devUtils/constants/images';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/List with Panel'
@@ -25,12 +24,14 @@ var items = [{
   email: 'idixie2@elegantthemes.com',
   firstName: 'Cacilia',
   lastName: 'Dixie',
-  avatar: pingImg
+  hasIcon: true,
+  avatar: AccountIcon
 }, {
   email: 'dfowler0@rambler.ru',
   firstName: 'Stavro',
   lastName: 'Fowler',
-  avatar: pingImg
+  hasIcon: true,
+  avatar: AccountIcon
 }, {
   email: 'jgolde8@jimdo.com',
   firstName: 'Celisse',
@@ -90,8 +91,7 @@ var items = [{
   firstName: 'Andromache',
   lastName: 'Idel',
   hasIcon: true,
-  avatar: AccountIcon,
-  hasSeparator: false
+  avatar: AccountIcon
 }];
 var sx = {
   wrapper: {
@@ -144,7 +144,7 @@ var sx = {
       alignItems: 'center'
     },
     icon: {
-      mr: 'sm',
+      mr: 'md',
       alignSelf: 'center',
       color: 'accent.40'
     },
@@ -154,7 +154,8 @@ var sx = {
       mr: 'md'
     },
     title: {
-      alignSelf: 'start'
+      alignSelf: 'start',
+      fontSize: 'md'
     },
     subtitle: {
       fontSize: 'sm',
@@ -177,13 +178,10 @@ var ListElement = function ListElement(_ref) {
   }, ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.listElement.iconWrapper
-  }, item.hasIcon ? ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(Icon, {
     icon: item.avatar,
-    size: 24,
+    size: "md",
     sx: sx.listElement.icon
-  }) : ___EmotionJSX(Avatar, {
-    sx: sx.listElement.avatar,
-    src: item.avatar
   }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
     variant: "bodyStrong",
     sx: sx.listElement.title
@@ -203,8 +201,7 @@ var ListElement = function ListElement(_ref) {
     mr: onClosePanel ? 'sm' : 0
   }, ___EmotionJSX(Icon, {
     icon: MoreVertIcon,
-    color: "white",
-    size: "sm"
+    size: "md"
   })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
     key: "enable"
   }, "Enable user"), ___EmotionJSX(Item, {
@@ -236,7 +233,7 @@ export var Default = function Default() {
       onPanelClose = _useOverlayPanelState.onClose;
 
   var panelTriggerRef = 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() {
@@ -259,28 +256,28 @@ export var Default = function Default() {
 
   return ___EmotionJSX(Box, {
     sx: sx.wrapper
-  }, ___EmotionJSX(Box, {
-    mb: "md"
-  }, ___EmotionJSX(Box, {
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
     align: "center",
     isRow: true,
     mb: "xs",
     role: "heading",
     "aria-level": "1"
   }, ___EmotionJSX(Text, {
-    variant: "title",
-    fontWeight: 3
+    fontSize: "xx",
+    fontWeight: 3,
+    fontColor: "text.primary"
   }, heading), ___EmotionJSX(IconButton, {
     "aria-label": "icon button",
     ml: "sm",
-    mt: "3px",
     variant: "inverted"
   }, ___EmotionJSX(Icon, {
     icon: PlusIcon,
-    color: "white",
-    size: "xs"
+    size: "sm"
   }))), ___EmotionJSX(Text, {
-    variant: "bodyWeak"
+    fontSize: "sm",
+    color: "text.secondary",
+    fontWeight: 0,
+    width: "800px"
   }, description, ___EmotionJSX(Link, {
     href: "https://uilibrary.ping-eng.com/",
     sx: {
@@ -288,10 +285,13 @@ export var Default = function Default() {
     }
   }, " Learn more"))), ___EmotionJSX(SearchField, {
     position: "fixed",
-    mb: "sm",
+    mb: "lg",
+    mt: "lg",
     width: "400px",
     placeholder: "Search",
     "aria-label": "search"
+  }), ___EmotionJSX(Separator, {
+    margin: 0
   }), ___EmotionJSX(ListView, {
     items: items,
     onSelectionChange: selectItemHandler,
@@ -301,7 +301,7 @@ export var Default = function Default() {
     return ___EmotionJSX(Item, {
       key: item.email,
       textValue: item.email,
-      hasSeparator: item.hasSeparator,
+      hasSeparator: true,
       listItemProps: {
         pl: 15,
         minHeight: 75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.42.0",
+  "version": "1.42.1-alpha.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",