@pingux/astro 1.27.0-alpha.1 → 1.27.0-alpha.10

package/lib/cjs/components/PageHeader/PageHeader.js

@@ -38,11 +38,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 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; }
 
+/**
+ * A `Page Header` is a composed component using text and icon button.
+ * The component is separated from the body and appears at the top.
+ * For customization,
+ * please see [Page Header](./?path=/story/recipes-page-header--default) recipe docs.
+ */
 var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var title = props.title,
       children = props.children,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  (0, _hooks.useDeprecationWarning)('The Page Header component will be deprecated in Astro-UI 2.0.0.');
+  (0, _hooks.useDeprecationWarning)('The Page Header component will be deprecated in Astro-UI 2.0.0. Use Page Header recipe instead.');
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     isRow: true,
     justifyContent: "space-between",

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

@@ -50,6 +50,28 @@ var validatePhoneNumber = function validatePhoneNumber(str) {
   return reg.test(str);
 };
 
+var sx = {
+  wrapperBox: {
+    width: '100%',
+    maxWidth: 500,
+    position: 'relative'
+  },
+  comboBoxFieldWrapperOpen: {
+    position: 'absolute',
+    transition: '0.2s width ease',
+    width: '100%'
+  },
+  comboBoxFieldWrapperClose: {
+    position: 'absolute',
+    transition: '0.2s width ease',
+    width: '110px'
+  },
+  inputWrapper: {
+    width: '100%',
+    marginLeft: '110px'
+  }
+};
+
 var Default = function Default() {
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -117,22 +139,14 @@ var Default = function Default() {
 
   return (0, _react2.jsx)(_Box["default"], {
     isRow: true,
-    sx: {
-      width: '100%',
-      maxWidth: 500,
-      position: 'relative'
-    }
+    sx: sx.wrapperBox
   }, (0, _react2.jsx)(_ComboBoxField["default"], {
     mt: -5,
     width: "100%",
     isOpen: isOpen,
     onOpenChange: setIsOpen,
     wrapperProps: {
-      sx: {
-        position: 'absolute',
-        transition: '0.2s width ease',
-        width: isOpen ? '100%' : 110
-      }
+      sx: isOpen ? sx.comboBoxFieldWrapperOpen : sx.comboBoxFieldWrapperClose
     },
     controlProps: {
       'aria-label': 'Country Picker'
@@ -151,8 +165,7 @@ var Default = function Default() {
       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"], {
-    width: "100%",
-    ml: 110
+    sx: sx.inputWrapper
   }, (0, _react2.jsx)(_Input["default"], {
     placeholder: "Phone number...",
     onChange: onPhoneNumberValueChange,

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

@@ -70,6 +70,48 @@ var inputProps = {
   label: 'Example label',
   ariaLabel: 'Example aria label'
 };
+var sx = {
+  editablePreview: {
+    whiteSpace: 'pre-line',
+    width: '100%',
+    overflowWrap: 'break-word',
+    minHeight: '45px',
+    paddingLeft: 'xs',
+    justifyContent: 'flex-end',
+    paddingBottom: 'xs',
+    borderBottomColor: 'active',
+    color: 'neutral.10',
+    fontSize: 'md',
+    fontWeight: 1,
+    lineHeight: '18px',
+    '&:focus': {
+      outline: 'none',
+      boxShadow: 'focus',
+      borderColor: 'active',
+      borderWidth: '1px',
+      borderStyle: 'solid'
+    }
+  },
+  editableInputWrapper: {
+    marginRight: '30px',
+    flexGrow: 1
+  },
+  editableInpuTextArea: {
+    maxHeight: '150px'
+  },
+  editableControlWrapper: {
+    position: 'absolute',
+    right: '0',
+    top: '27.5%',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  editableControlIconButton: {
+    marginRight: 'md',
+    width: '20px',
+    height: '20px'
+  }
+};
 
 var Default = function Default() {
   return (0, _react2.jsx)(Editable, {
@@ -127,6 +169,13 @@ var EditablePreview = function EditablePreview() {
       hasFocus = _useState4[0],
       setFocus = _useState4[1];
 
+  var editablePreviewDynamicSx = {
+    backgroundColor: hasFocus ? 'accent.95' : 'white',
+    borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
+    '&:hover': {
+      background: editableContext.isEditing ? 'white' : 'accent.95'
+    }
+  };
   (0, _react.useEffect)(function () {
     if (hasFocus && editableContext.isEditing) {
       setFocus(false);
@@ -153,8 +202,8 @@ var EditablePreview = function EditablePreview() {
     "aria-hidden": editableContext.isEditing,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
-    "aria-readonly": "false",
     "aria-label": "Inline editable text field",
+    role: "textbox",
     onFocus: function onFocus() {
       return setFocus(true);
     },
@@ -162,32 +211,7 @@ var EditablePreview = function EditablePreview() {
       return setFocus(false);
     },
     placeholder: "Click or press enter to edit text",
-    sx: {
-      whiteSpace: 'pre-line',
-      backgroundColor: hasFocus ? 'accent.95' : 'white',
-      width: '100%',
-      overflowWrap: 'break-word',
-      minHeight: '45px',
-      paddingLeft: 'xs',
-      justifyContent: 'flex-end',
-      paddingBottom: 'xs',
-      borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
-      borderBottomColor: 'active',
-      color: 'neutral.10',
-      fontSize: 'md',
-      fontWeight: 1,
-      lineHeight: '18px',
-      '&:hover': {
-        background: editableContext.isEditing ? 'white' : 'accent.95'
-      },
-      '&:focus': {
-        outline: 'none',
-        boxShadow: 'focus',
-        borderColor: 'active',
-        borderWidth: '1px',
-        borderStyle: 'solid'
-      }
-    }
+    sx: _objectSpread(_objectSpread({}, editablePreviewDynamicSx), sx.editablePreview)
   }, editableContext.value);
 };
 /**
@@ -256,10 +280,7 @@ var EditableInput = function EditableInput(props) {
   return (0, _react2.jsx)(_index.Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
-    sx: {
-      marginRight: '30px',
-      flexGrow: 1
-    }
+    sx: sx.editableInputWrapper
   }, (0, _react2.jsx)(_index.TextAreaField, {
     rows: 1,
     ref: editableInput,
@@ -270,9 +291,7 @@ var EditableInput = function EditableInput(props) {
     onKeyDown: handleKeyDown,
     value: editingValue,
     "aria-label": ariaLabel,
-    sx: {
-      maxHeight: '150px'
-    },
+    sx: sx.editableInpuTextArea,
     isUnresizable: true
   }));
 };
@@ -323,22 +342,12 @@ var EditableControl = function EditableControl(props) {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
     isRow: true,
-    sx: {
-      position: 'absolute',
-      right: '0',
-      top: '27.5%',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    }
+    sx: sx.editableControlWrapper
   }, (0, _react2.jsx)(_index.IconButton, {
     onPress: handleSubmit,
     "aria-label": confirmBtn.ariaLabel,
     variant: confirmBtn.variant,
-    mr: "15px",
-    sx: {
-      width: '20px',
-      height: '20px'
-    }
+    sx: sx.editableControlIconButton
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CheckIcon["default"]
   })), (0, _react2.jsx)(_index.IconButton, {

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

@@ -128,44 +128,106 @@ var items = [{
   avatar: _AccountIcon["default"],
   hasSeparator: false
 }];
+var sx = {
+  wrapper: {
+    px: 'lg',
+    py: 'lg',
+    bg: 'accent.99',
+    height: '900px',
+    overflowY: 'scroll'
+  },
+  searchField: {
+    position: 'fixed',
+    mb: 'sm',
+    width: '400px'
+  },
+  listElementWrapper: {
+    px: 'md',
+    bg: 'accent.99',
+    justifyContent: 'center'
+  },
+  separator: {
+    bg: 'accent.90'
+  },
+  tabsWrapper: {
+    px: 'lg',
+    pt: 'xs'
+  },
+  iconButton: {
+    position: 'absolute',
+    top: 0,
+    right: 0
+  },
+  itemLabel: {
+    fontSize: 'sm',
+    fontWeight: 3,
+    lineHeight: '16px',
+    mb: 'xs'
+  },
+  itemValue: {
+    fontWeight: 0,
+    lineHeight: '18px',
+    variant: 'base',
+    mb: 'md'
+  },
+  listElement: {
+    wrapper: {
+      minHeight: '60px'
+    },
+    iconWrapper: {
+      mr: 'auto',
+      alignItems: 'center'
+    },
+    icon: {
+      mr: 'sm',
+      alignSelf: 'center',
+      color: 'accent.40'
+    },
+    avatar: {
+      width: '25px',
+      height: '25px',
+      mr: 'md'
+    },
+    title: {
+      alignSelf: 'start'
+    },
+    subtitle: {
+      fontSize: 'sm',
+      my: '1px',
+      lineHeight: '16px',
+      alignSelf: 'start'
+    },
+    menuWrapper: {
+      alignSelf: 'center'
+    }
+  }
+};
 
 var ListElement = function ListElement(_ref) {
   var item = _ref.item,
       onClosePanel = _ref.onClosePanel;
   return (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    minHeight: "60px"
+    sx: sx.listElement.wrapper
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    mr: "auto",
-    alignItems: "center"
+    sx: sx.listElement.iconWrapper
   }, item.hasIcon ? (0, _react2.jsx)(_index.Icon, {
     icon: item.avatar,
-    alignSelf: "center",
     size: 24,
-    mr: "sm",
-    color: "accent.40"
+    sx: sx.listElement.icon
   }) : (0, _react2.jsx)(_index.Avatar, {
-    mr: "md",
-    sx: {
-      width: '25px',
-      height: '25px'
-    },
+    sx: sx.listElement.avatar,
     src: item.avatar
   }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
     variant: "bodyStrong",
-    alignSelf: "start"
+    sx: sx.listElement.title
   }, item.lastName, ", ", item.firstName), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      my: '1px',
-      lineHeight: '16px'
-    },
     variant: "subtitle",
-    alignSelf: "start"
+    sx: sx.listElement.subtitle
   }, item.email))), (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    alignSelf: "center"
+    sx: sx.listElement.menuWrapper
   }, (0, _react2.jsx)(_index.SwitchField, {
     "aria-label": "active user",
     isDefaultSelected: true,
@@ -222,11 +284,7 @@ var Default = function Default() {
   };
 
   return (0, _react2.jsx)(_index.Box, {
-    px: "lg",
-    py: "lg",
-    bg: "accent.99",
-    height: "900px",
-    overflowY: "scroll"
+    sx: sx.wrapper
   }, (0, _react2.jsx)(_index.SearchField, {
     position: "fixed",
     mb: "sm",
@@ -260,18 +318,15 @@ var Default = function Default() {
     restoreFocus: true,
     autoFocus: true
   }, (0, _react2.jsx)(_index.Box, {
-    px: "md",
-    bg: "accent.99",
-    justifyContent: "center"
+    sx: sx.listElementWrapper
   }, (0, _react2.jsx)(ListElement, {
     item: selectedItemId >= 0 ? items[selectedItemId] : [],
     onClosePanel: closePanelHandler
   })), (0, _react2.jsx)(_index.Separator, {
     margin: 0,
-    bg: "accent.90"
+    sx: sx.separator
   }), (0, _react2.jsx)(_index.Box, {
-    px: "lg",
-    pt: "xs"
+    sx: sx.tabsWrapper
   }, (0, _react2.jsx)(_index.Tabs, {
     tabListProps: {
       justifyContent: 'center'
@@ -285,73 +340,33 @@ var Default = function Default() {
     title: "Profile"
   }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
     variant: "inverted",
-    sx: {
-      position: 'absolute',
-      top: 0,
-      right: 0
-    }
+    sx: sx.iconButton
   }, (0, _react2.jsx)(_PencilIcon["default"], {
     size: 20
   })), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Full Name"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "First Name"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].firstName), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Last Name"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Email"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].email))), (0, _react2.jsx)(_index.Tab, {
     title: "Group Memberships"
   }, (0, _react2.jsx)(_index.Text, null, "Group Memberships")), (0, _react2.jsx)(_index.Tab, {

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

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PlusIcon = _interopRequireDefault(require("mdi-react/PlusIcon"));
+
+var _index = require("../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Recipes/Page Header'
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var heading = 'Title of the Page';
+  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.';
+  return (0, _react2.jsx)(_index.Box, null, (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
+  }, heading), (0, _react2.jsx)(_index.Button, {
+    variant: "inlinePrimary",
+    ml: "sm"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    color: "white",
+    size: 13,
+    mr: "4px"
+  }), "\xA0", "Add")), (0, _react2.jsx)(_index.Text, {
+    variant: "bodyWeak"
+  }, description)), (0, _react2.jsx)(_index.Box, {
+    mt: "xl"
+  }, (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
+  }, 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: 13
+  }))), (0, _react2.jsx)(_index.Text, {
+    variant: "bodyWeak"
+  }, description)));
+};
+
+exports.Default = Default;

package/lib/components/PageHeader/PageHeader.js

@@ -6,13 +6,20 @@ import PropTypes from 'prop-types';
 import Text from '../Text/Text';
 import Box from '../Box/Box';
 import { useDeprecationWarning } from '../../hooks';
+/**
+ * A `Page Header` is a composed component using text and icon button.
+ * The component is separated from the body and appears at the top.
+ * For customization,
+ * please see [Page Header](./?path=/story/recipes-page-header--default) recipe docs.
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PageHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var title = props.title,
       children = props.children,
       others = _objectWithoutProperties(props, _excluded);
 
-  useDeprecationWarning('The Page Header component will be deprecated in Astro-UI 2.0.0.');
+  useDeprecationWarning('The Page Header component will be deprecated in Astro-UI 2.0.0. Use Page Header recipe instead.');
   return ___EmotionJSX(Box, _extends({
     isRow: true,
     justifyContent: "space-between",

package/lib/recipes/CountryPicker.stories.js

@@ -17,6 +17,27 @@ var validatePhoneNumber = function validatePhoneNumber(str) {
   return reg.test(str);
 };
 
+var sx = {
+  wrapperBox: {
+    width: '100%',
+    maxWidth: 500,
+    position: 'relative'
+  },
+  comboBoxFieldWrapperOpen: {
+    position: 'absolute',
+    transition: '0.2s width ease',
+    width: '100%'
+  },
+  comboBoxFieldWrapperClose: {
+    position: 'absolute',
+    transition: '0.2s width ease',
+    width: '110px'
+  },
+  inputWrapper: {
+    width: '100%',
+    marginLeft: '110px'
+  }
+};
 export var Default = function Default() {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -84,22 +105,14 @@ export var Default = function Default() {
 
   return ___EmotionJSX(Box, {
     isRow: true,
-    sx: {
-      width: '100%',
-      maxWidth: 500,
-      position: 'relative'
-    }
+    sx: sx.wrapperBox
   }, ___EmotionJSX(ComboBoxField, {
     mt: -5,
     width: "100%",
     isOpen: isOpen,
     onOpenChange: setIsOpen,
     wrapperProps: {
-      sx: {
-        position: 'absolute',
-        transition: '0.2s width ease',
-        width: isOpen ? '100%' : 110
-      }
+      sx: isOpen ? sx.comboBoxFieldWrapperOpen : sx.comboBoxFieldWrapperClose
     },
     controlProps: {
       'aria-label': 'Country Picker'
@@ -118,8 +131,7 @@ export var Default = function Default() {
       key: item[0]
     }, _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(item[1].name)).call(_context2, item[1].name !== item[1]["native"] ? " (".concat(item[1]["native"], ")") : '', " +")).call(_context, item[1].phone.split(',')[0]));
   }), ___EmotionJSX(Box, {
-    width: "100%",
-    ml: 110
+    sx: sx.inputWrapper
   }, ___EmotionJSX(Input, {
     placeholder: "Phone number...",
     onChange: onPhoneNumberValueChange,

package/lib/recipes/EditableInput.stories.js

@@ -37,6 +37,48 @@ var inputProps = {
   label: 'Example label',
   ariaLabel: 'Example aria label'
 };
+var sx = {
+  editablePreview: {
+    whiteSpace: 'pre-line',
+    width: '100%',
+    overflowWrap: 'break-word',
+    minHeight: '45px',
+    paddingLeft: 'xs',
+    justifyContent: 'flex-end',
+    paddingBottom: 'xs',
+    borderBottomColor: 'active',
+    color: 'neutral.10',
+    fontSize: 'md',
+    fontWeight: 1,
+    lineHeight: '18px',
+    '&:focus': {
+      outline: 'none',
+      boxShadow: 'focus',
+      borderColor: 'active',
+      borderWidth: '1px',
+      borderStyle: 'solid'
+    }
+  },
+  editableInputWrapper: {
+    marginRight: '30px',
+    flexGrow: 1
+  },
+  editableInpuTextArea: {
+    maxHeight: '150px'
+  },
+  editableControlWrapper: {
+    position: 'absolute',
+    right: '0',
+    top: '27.5%',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  editableControlIconButton: {
+    marginRight: 'md',
+    width: '20px',
+    height: '20px'
+  }
+};
 export var Default = function Default() {
   return ___EmotionJSX(Editable, {
     value: "Some value..."
@@ -90,6 +132,13 @@ var EditablePreview = function EditablePreview() {
       hasFocus = _useState4[0],
       setFocus = _useState4[1];
 
+  var editablePreviewDynamicSx = {
+    backgroundColor: hasFocus ? 'accent.95' : 'white',
+    borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
+    '&:hover': {
+      background: editableContext.isEditing ? 'white' : 'accent.95'
+    }
+  };
   useEffect(function () {
     if (hasFocus && editableContext.isEditing) {
       setFocus(false);
@@ -116,8 +165,8 @@ var EditablePreview = function EditablePreview() {
     "aria-hidden": editableContext.isEditing,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
-    "aria-readonly": "false",
     "aria-label": "Inline editable text field",
+    role: "textbox",
     onFocus: function onFocus() {
       return setFocus(true);
     },
@@ -125,32 +174,7 @@ var EditablePreview = function EditablePreview() {
       return setFocus(false);
     },
     placeholder: "Click or press enter to edit text",
-    sx: {
-      whiteSpace: 'pre-line',
-      backgroundColor: hasFocus ? 'accent.95' : 'white',
-      width: '100%',
-      overflowWrap: 'break-word',
-      minHeight: '45px',
-      paddingLeft: 'xs',
-      justifyContent: 'flex-end',
-      paddingBottom: 'xs',
-      borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
-      borderBottomColor: 'active',
-      color: 'neutral.10',
-      fontSize: 'md',
-      fontWeight: 1,
-      lineHeight: '18px',
-      '&:hover': {
-        background: editableContext.isEditing ? 'white' : 'accent.95'
-      },
-      '&:focus': {
-        outline: 'none',
-        boxShadow: 'focus',
-        borderColor: 'active',
-        borderWidth: '1px',
-        borderStyle: 'solid'
-      }
-    }
+    sx: _objectSpread(_objectSpread({}, editablePreviewDynamicSx), sx.editablePreview)
   }, editableContext.value);
 };
 /**
@@ -219,10 +243,7 @@ var EditableInput = function EditableInput(props) {
   return ___EmotionJSX(Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
-    sx: {
-      marginRight: '30px',
-      flexGrow: 1
-    }
+    sx: sx.editableInputWrapper
   }, ___EmotionJSX(TextAreaField, {
     rows: 1,
     ref: editableInput,
@@ -233,9 +254,7 @@ var EditableInput = function EditableInput(props) {
     onKeyDown: handleKeyDown,
     value: editingValue,
     "aria-label": ariaLabel,
-    sx: {
-      maxHeight: '150px'
-    },
+    sx: sx.editableInpuTextArea,
     isUnresizable: true
   }));
 };
@@ -286,22 +305,12 @@ var EditableControl = function EditableControl(props) {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
     isRow: true,
-    sx: {
-      position: 'absolute',
-      right: '0',
-      top: '27.5%',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    }
+    sx: sx.editableControlWrapper
   }, ___EmotionJSX(IconButton, {
     onPress: handleSubmit,
     "aria-label": confirmBtn.ariaLabel,
     variant: confirmBtn.variant,
-    mr: "15px",
-    sx: {
-      width: '20px',
-      height: '20px'
-    }
+    sx: sx.editableControlIconButton
   }, ___EmotionJSX(Icon, {
     icon: CheckIcon
   })), ___EmotionJSX(IconButton, {

package/lib/recipes/ListAndPanel.stories.js

@@ -92,44 +92,106 @@ var items = [{
   avatar: AccountIcon,
   hasSeparator: false
 }];
+var sx = {
+  wrapper: {
+    px: 'lg',
+    py: 'lg',
+    bg: 'accent.99',
+    height: '900px',
+    overflowY: 'scroll'
+  },
+  searchField: {
+    position: 'fixed',
+    mb: 'sm',
+    width: '400px'
+  },
+  listElementWrapper: {
+    px: 'md',
+    bg: 'accent.99',
+    justifyContent: 'center'
+  },
+  separator: {
+    bg: 'accent.90'
+  },
+  tabsWrapper: {
+    px: 'lg',
+    pt: 'xs'
+  },
+  iconButton: {
+    position: 'absolute',
+    top: 0,
+    right: 0
+  },
+  itemLabel: {
+    fontSize: 'sm',
+    fontWeight: 3,
+    lineHeight: '16px',
+    mb: 'xs'
+  },
+  itemValue: {
+    fontWeight: 0,
+    lineHeight: '18px',
+    variant: 'base',
+    mb: 'md'
+  },
+  listElement: {
+    wrapper: {
+      minHeight: '60px'
+    },
+    iconWrapper: {
+      mr: 'auto',
+      alignItems: 'center'
+    },
+    icon: {
+      mr: 'sm',
+      alignSelf: 'center',
+      color: 'accent.40'
+    },
+    avatar: {
+      width: '25px',
+      height: '25px',
+      mr: 'md'
+    },
+    title: {
+      alignSelf: 'start'
+    },
+    subtitle: {
+      fontSize: 'sm',
+      my: '1px',
+      lineHeight: '16px',
+      alignSelf: 'start'
+    },
+    menuWrapper: {
+      alignSelf: 'center'
+    }
+  }
+};
 
 var ListElement = function ListElement(_ref) {
   var item = _ref.item,
       onClosePanel = _ref.onClosePanel;
   return ___EmotionJSX(Box, {
     isRow: true,
-    minHeight: "60px"
+    sx: sx.listElement.wrapper
   }, ___EmotionJSX(Box, {
     isRow: true,
-    mr: "auto",
-    alignItems: "center"
+    sx: sx.listElement.iconWrapper
   }, item.hasIcon ? ___EmotionJSX(Icon, {
     icon: item.avatar,
-    alignSelf: "center",
     size: 24,
-    mr: "sm",
-    color: "accent.40"
+    sx: sx.listElement.icon
   }) : ___EmotionJSX(Avatar, {
-    mr: "md",
-    sx: {
-      width: '25px',
-      height: '25px'
-    },
+    sx: sx.listElement.avatar,
     src: item.avatar
   }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
     variant: "bodyStrong",
-    alignSelf: "start"
+    sx: sx.listElement.title
   }, item.lastName, ", ", item.firstName), ___EmotionJSX(Text, {
-    sx: {
-      fontSize: 'sm',
-      my: '1px',
-      lineHeight: '16px'
-    },
     variant: "subtitle",
-    alignSelf: "start"
+    sx: sx.listElement.subtitle
   }, item.email))), ___EmotionJSX(Box, {
     isRow: true,
-    alignSelf: "center"
+    sx: sx.listElement.menuWrapper
   }, ___EmotionJSX(SwitchField, {
     "aria-label": "active user",
     isDefaultSelected: true,
@@ -186,11 +248,7 @@ export var Default = function Default() {
   };
 
   return ___EmotionJSX(Box, {
-    px: "lg",
-    py: "lg",
-    bg: "accent.99",
-    height: "900px",
-    overflowY: "scroll"
+    sx: sx.wrapper
   }, ___EmotionJSX(SearchField, {
     position: "fixed",
     mb: "sm",
@@ -224,18 +282,15 @@ export var Default = function Default() {
     restoreFocus: true,
     autoFocus: true
   }, ___EmotionJSX(Box, {
-    px: "md",
-    bg: "accent.99",
-    justifyContent: "center"
+    sx: sx.listElementWrapper
   }, ___EmotionJSX(ListElement, {
     item: selectedItemId >= 0 ? items[selectedItemId] : [],
     onClosePanel: closePanelHandler
   })), ___EmotionJSX(Separator, {
     margin: 0,
-    bg: "accent.90"
+    sx: sx.separator
   }), ___EmotionJSX(Box, {
-    px: "lg",
-    pt: "xs"
+    sx: sx.tabsWrapper
   }, ___EmotionJSX(Tabs, {
     tabListProps: {
       justifyContent: 'center'
@@ -249,73 +304,33 @@ export var Default = function Default() {
     title: "Profile"
   }, selectedItemId >= 0 && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButton, {
     variant: "inverted",
-    sx: {
-      position: 'absolute',
-      top: 0,
-      right: 0
-    }
+    sx: sx.iconButton
   }, ___EmotionJSX(PencilIcon, {
     size: 20
   })), ___EmotionJSX(Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Full Name"), ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), ___EmotionJSX(Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "First Name"), ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].firstName), ___EmotionJSX(Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Last Name"), ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].lastName), ___EmotionJSX(Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Email"), ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].email))), ___EmotionJSX(Tab, {
     title: "Group Memberships"
   }, ___EmotionJSX(Text, null, "Group Memberships")), ___EmotionJSX(Tab, {

package/lib/recipes/PageHeader.stories.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PlusIcon from 'mdi-react/PlusIcon';
+import { Box, Button, IconButton, Icon, Text } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/Page Header'
+};
+export var Default = function Default() {
+  var heading = 'Title of the Page';
+  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.';
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+    align: "center",
+    isRow: true,
+    mb: "xs",
+    role: "heading",
+    "aria-level": "1"
+  }, ___EmotionJSX(Text, {
+    variant: "title",
+    fontWeight: 3
+  }, heading), ___EmotionJSX(Button, {
+    variant: "inlinePrimary",
+    ml: "sm"
+  }, ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    color: "white",
+    size: 13,
+    mr: "4px"
+  }), "\xA0", "Add")), ___EmotionJSX(Text, {
+    variant: "bodyWeak"
+  }, description)), ___EmotionJSX(Box, {
+    mt: "xl"
+  }, ___EmotionJSX(Box, {
+    align: "center",
+    isRow: true,
+    mb: "xs",
+    role: "heading",
+    "aria-level": "1"
+  }, ___EmotionJSX(Text, {
+    variant: "title",
+    fontWeight: 3
+  }, heading), ___EmotionJSX(IconButton, {
+    "aria-label": "icon button",
+    ml: "sm",
+    mt: "3px",
+    variant: "inverted"
+  }, ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    color: "white",
+    size: 13
+  }))), ___EmotionJSX(Text, {
+    variant: "bodyWeak"
+  }, description)));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.27.0-alpha.1",
+  "version": "1.27.0-alpha.10",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",
@@ -121,6 +121,7 @@
     "@react-stately/radio": "^3.2.0",
     "@react-stately/searchfield": "^3.1.1",
     "@react-stately/select": "^3.1.1",
+    "@react-stately/selection": "~3.10.2",
     "@react-stately/slider": "^3.0.7",
     "@react-stately/tabs": "^3.0.1",
     "@react-stately/toggle": "^3.2.0",