@pingux/astro 2.14.0 → 2.14.1-alpha.1

package/lib/cjs/components/ListViewItem/ListViewItem.styles.js

@@ -42,10 +42,6 @@ var container = {
     borderBottomColor: 'line.light'
   }
 };
-var styledListItem = _objectSpread(_objectSpread({}, container), {}, {
-  padding: 0,
-  minHeight: 0
-});
 var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
   minHeight: '75px',
   height: '76px',
@@ -75,9 +71,50 @@ var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
     }
   }
 });
+var styledContainer = {
+  m: '1px',
+  minHeight: '72px',
+  '&.is-hovered': {
+    bg: 'white',
+    cursor: 'pointer'
+  }
+};
+var styledListItem = _objectSpread(_objectSpread({}, container), {}, {
+  minHeight: 0,
+  padding: 0
+});
+var controls = {
+  alignItems: 'center',
+  alignSelf: 'center',
+  flexShrink: 0,
+  ml: 'auto',
+  pr: 'sm'
+};
+var iconWrapper = {
+  cursor: 'pointer',
+  display: 'flex',
+  flex: '1 1 0px',
+  ml: 'md'
+};
+var imageWrapper = _objectSpread(_objectSpread({}, iconWrapper), {}, {
+  ml: 'sm'
+});
+var leftOfDataWrapper = _objectSpread(_objectSpread({}, iconWrapper), {}, {
+  ml: 0
+});
+var rightOfData = {
+  alignSelf: 'center',
+  flexShrink: 0
+};
 var _default = {
   container: container,
+  controls: controls,
+  iconWrapper: iconWrapper,
+  imageWrapper: imageWrapper,
+  leftOfDataWrapper: leftOfDataWrapper,
   linkedViewContainer: linkedViewContainer,
+  rightOfData: rightOfData,
+  styledContainer: styledContainer,
   styledListItem: styledListItem
 };
 exports["default"] = _default;

package/lib/cjs/components/Text/Text.styles.d.ts

@@ -21,9 +21,9 @@ export declare const text: {
         overflowWrap: string;
     };
     bodyStrong: {
-        fontWeight: number;
         color: string;
         fontFamily: string;
+        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
@@ -181,12 +181,12 @@ export declare const text: {
         wordBreak: string;
     };
     listTitle: {
+        textOverflow: string;
+        overflow: string;
+        whiteSpace: string;
         fontSize: string;
         fontWeight: number;
         color: string;
-        whiteSpace: string;
-        overflow: string;
-        textOverflow: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
@@ -194,12 +194,44 @@ export declare const text: {
         wordBreak: string;
     };
     listSubtitle: {
+        textOverflow: string;
+        overflow: string;
+        whiteSpace: string;
         fontSize: string;
         fontWeight: number;
         color: string;
-        whiteSpace: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    listViewItemSubtext: {
+        alignSelf: string;
+        fontSize: string;
+        lineHeight: string;
+        my: string;
+        textOverflow: string;
         overflow: string;
+        whiteSpace: string;
+        color: string;
+        fontFamily: string;
+        fontWeight: number;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    listViewItemText: {
+        alignSelf: string;
+        fontSize: string;
         textOverflow: string;
+        overflow: string;
+        whiteSpace: string;
+        color: string;
+        fontFamily: string;
+        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
@@ -223,9 +255,9 @@ export declare const text: {
         wordBreak: string;
     };
     subtitle: {
-        fontWeight: number;
         color: string;
         fontFamily: string;
+        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
@@ -268,9 +300,9 @@ export declare const text: {
         wordBreak: string;
     };
     textEllipsis: {
-        whiteSpace: string;
-        overflow: string;
         textOverflow: string;
+        overflow: string;
+        whiteSpace: string;
     };
     title: {
         fontSize: string;

package/lib/cjs/components/Text/Text.styles.js

@@ -74,13 +74,34 @@ var itemTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
   color: 'text.primary',
   fontFamily: 'standard'
 });
+var bodyStrong = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  color: 'text.primary',
+  fontFamily: 'standard',
+  fontWeight: 1
+});
+var subtitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  color: 'text.secondary',
+  fontFamily: 'standard',
+  fontWeight: 0
+});
+var textEllipsis = {
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
+};
+var listViewItemText = _objectSpread(_objectSpread(_objectSpread({}, bodyStrong), textEllipsis), {}, {
+  alignSelf: 'start',
+  fontSize: 'md'
+});
+var listViewItemSubtext = _objectSpread(_objectSpread(_objectSpread({}, subtitle), textEllipsis), {}, {
+  alignSelf: 'start',
+  fontSize: 'sm',
+  lineHeight: '16px',
+  my: '1px'
+});
 var text = {
   base: base,
-  bodyStrong: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontWeight: 1,
-    color: 'text.primary',
-    fontFamily: 'standard'
-  }),
+  bodyStrong: bodyStrong,
   bodyWeak: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'sm',
     color: 'text.secondary',
@@ -152,30 +173,22 @@ var text = {
   listTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'md',
     fontWeight: 1,
-    color: 'text.primary',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  }),
+    color: 'text.primary'
+  }, textEllipsis),
   listSubtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'sm',
     fontWeight: 0,
-    color: 'text.secondary',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  }),
+    color: 'text.secondary'
+  }, textEllipsis),
+  listViewItemSubtext: listViewItemSubtext,
+  listViewItemText: listViewItemText,
   placeholder: {
     fontWeight: -1,
     color: 'text.secondary',
     fontFamily: 'standard'
   },
   sectionTitle: sectionTitle,
-  subtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontWeight: 0,
-    color: 'text.secondary',
-    fontFamily: 'standard'
-  }),
+  subtitle: subtitle,
   tabLabel: tabLabel,
   tableData: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'sm',
@@ -183,11 +196,7 @@ var text = {
     color: 'text.primary',
     fontFamily: 'standard'
   }),
-  textEllipsis: {
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  },
+  textEllipsis: textEllipsis,
   title: title
 };
 exports.text = text;

package/lib/cjs/experimental/ListViewItem/ListViewItem.js

@@ -1,15 +1,9 @@
 "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 _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
@@ -18,7 +12,6 @@ exports["default"] = exports.LIST_ITEM_ICON = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _interactions = require("@react-aria/interactions");
 var _hooks = require("../../hooks");
@@ -28,62 +21,6 @@ var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "data", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
 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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-var truncate = {
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap'
-};
-var sx = {
-  container: {
-    m: 1,
-    minHeight: 72,
-    '&.is-hovered': {
-      bg: 'white',
-      cursor: 'pointer'
-    }
-  },
-  controls: {
-    alignSelf: 'center',
-    ml: 'auto',
-    pr: 'sm',
-    flexShrink: 0
-  },
-  data: {
-    alignItems: 'center'
-  },
-  icon: {
-    width: 25,
-    color: 'accent.40'
-  },
-  image: {
-    width: 35
-  },
-  rightOfData: {
-    alignSelf: 'center',
-    ml: 'sm'
-  },
-  subtitle: _objectSpread(_objectSpread({}, truncate), {}, {
-    alignSelf: 'start',
-    fontSize: 'sm',
-    lineHeight: '16px',
-    my: '1px'
-  }),
-  text: {
-    ml: 'md'
-  },
-  title: _objectSpread(_objectSpread({}, truncate), {}, {
-    alignSelf: 'start',
-    fontSize: 'md'
-  }),
-  wrapper: {
-    cursor: 'pointer',
-    display: 'flex',
-    flex: '1 1 0px',
-    ml: 'md'
-  }
-};
 var LIST_ITEM_ICON = '-list-item-icon';
 exports.LIST_ITEM_ICON = LIST_ITEM_ICON;
 var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -116,22 +53,15 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       isSelected: isSelected
     }),
     classNames = _useStatusClasses.classNames;
-  var iff = function iff(condition, then, otherwise) {
-    return condition ? then : otherwise;
+  var getWrapperVariant = function getWrapperVariant() {
+    if (slots !== null && slots !== void 0 && slots.leftOfData) return 'listViewItem.leftOfDataWrapper';
+    if (image && !icon) return 'listViewItem.imageWrapper';
+    return 'listViewItem.iconWrapper';
   };
-  var wrapperStyles = slots !== null && slots !== void 0 && slots.leftOfData ? _objectSpread(_objectSpread({}, sx.wrapper), {}, {
-    ml: 0
-  }) : iff(!icon && image, _objectSpread(_objectSpread({}, sx.wrapper), {}, {
-    ml: 10
-  }), sx.wrapper);
-  var textStyles = slots !== null && slots !== void 0 && slots.leftOfData ? _objectSpread(_objectSpread({}, sx.text), {}, {
-    ml: 0
-  }) : iff(!icon && image, _objectSpread(_objectSpread({}, sx.wrapper), {}, {
-    ml: 10
-  }), sx.wrapper);
   var renderIcon = icon && (0, _react2.jsx)(_index.Box, {
-    sx: sx.icon
+    width: "25px"
   }, (0, _react2.jsx)(_index.Icon, {
+    color: "accent.40",
     icon: icon,
     size: "md",
     title: {
@@ -140,7 +70,7 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   }));
   var renderImage = !icon && image && (0, _react2.jsx)(_index.Box, {
-    sx: sx.image
+    width: "35px"
   }, (0, _react2.jsx)(_index.Image, {
     src: image.src,
     alt: image.alt,
@@ -148,32 +78,28 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }));
   var renderData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    sx: sx.data
+    alignItems: "center"
   }, (slots === null || slots === void 0 ? void 0 : slots.leftOfData) || renderIcon || renderImage, (0, _react2.jsx)(_index.Box, {
-    sx: textStyles
+    variant: getWrapperVariant()
   }, text && (0, _react2.jsx)(_index.Text, {
-    variant: "bodyStrong",
-    sx: sx.title
+    variant: "listViewItemText"
   }, text), subtext && (0, _react2.jsx)(_index.Text, {
-    variant: "subtitle",
-    sx: sx.subtitle
+    variant: "listViewItemSubtext"
   }, subtext)));
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     className: classNames,
     ref: ref,
-    sx: sx.container
+    variant: "listViewItem.styledContainer"
   }, hoverProps, others), (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    sx: wrapperStyles
+    variant: getWrapperVariant()
   }, renderData, (slots === null || slots === void 0 ? void 0 : slots.rightOfData) && (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    alignSelf: "center",
-    flexShrink: 0
+    variant: "listViewItem.rightOfData"
   }, slots.rightOfData), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     gap: "sm",
-    alignItems: "center",
-    sx: sx.controls
+    variant: "listViewItem.controls"
   }, children)));
 });
 ListViewItem.propTypes = _listViewItemAttributes.listViewItemPropTypes;

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

@@ -18,7 +18,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _AddIcon = _interopRequireDefault(require("@pingux/mdi-react/AddIcon"));
 var _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
 var _CogsIcon = _interopRequireDefault(require("@pingux/mdi-react/CogsIcon"));
-var _CreateIcon = _interopRequireDefault(require("@pingux/mdi-react/CreateIcon"));
 var _DeleteIcon = _interopRequireDefault(require("@pingux/mdi-react/DeleteIcon"));
 var _uuid = require("uuid");
 var _index = require("../index");
@@ -36,33 +35,26 @@ var sx = {
     position: 'absolute',
     right: '4px',
     top: '4px',
-    fill: '#A31300'
-  },
-  attributeMappingTitle: {
-    fontSize: 'lg',
-    lineHeight: '21px',
-    fontWeight: 3,
-    color: 'text.primary'
-  },
-  attributeMappingTitleWrapper: {
-    marginBottom: 'md',
-    alignItems: 'center'
+    fill: 'critical.bright'
   },
   badge: {
-    width: 'xx',
-    height: '22px',
     alignSelf: 'center',
-    minWidth: 'fit-content',
     border: '1px solid',
     borderColor: 'neutral.80',
-    backgroundColor: 'white !important',
-    marginLeft: 8,
+    backgroundColor: 'white',
+    marginLeft: 'sm',
     '& span': {
-      fontSize: 'sm',
       lineHeight: 1,
-      color: '#253746'
+      color: 'text.primary'
     }
   },
+  container: {
+    px: 'sm',
+    pt: 'sm',
+    pb: 'lg',
+    width: '450px',
+    backgroundColor: 'accent.99'
+  },
   calloutSx: {
     width: '450px',
     marginBottom: 'xs',
@@ -71,11 +63,6 @@ var sx = {
   createIconButton: {
     marginLeft: 'xs'
   },
-  defaultFieldsWrapperBox: {
-    padding: '10px 10px 24px 10px',
-    width: '450px',
-    backgroundColor: 'accent.99'
-  },
   fieldColumnTitle: {
     fontWeight: 3,
     fontSize: 'md',
@@ -90,13 +77,8 @@ var sx = {
     marginTop: 'sm'
   },
   separator: {
-    width: '21px',
+    width: '20px',
     margin: '0 2px'
-  },
-  tooltipBox: {
-    marginLeft: 'xs',
-    height: 'md',
-    width: 'md'
   }
 };
 var editSx = {
@@ -165,7 +147,6 @@ var editSx = {
 var helperTextId = (0, _uuid.v4)();
 var Row = function Row(props) {
   var withBadge = props.withBadge,
-    withTooltip = props.withTooltip,
     withError = props.withError,
     leftValue = props.leftValue,
     rightValue = props.rightValue;
@@ -213,35 +194,11 @@ var Row = function Row(props) {
   }), withBadge && (0, _react2.jsx)(_index.Badge, {
     label: "Required",
     sx: sx.badge
-  }), withTooltip && (0, _react2.jsx)(_index.Box, {
-    sx: sx.tooltipBox
-  }, (0, _react2.jsx)(_index.HelpHint, {
-    tooltipProps: {
-      direction: 'bottom'
-    }
-  }, "Population set to default")));
-};
-var Title = function Title() {
-  return (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: sx.attributeMappingTitleWrapper
-  }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.attributeMappingTitle
-  }, "Attribute Mapping"), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
-    sx: sx.createIconButton,
-    variant: "inverted",
-    "aria-label": "edit header button"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CreateIcon["default"],
-    size: "sm",
-    title: {
-      name: 'Create Icon'
-    }
-  }))));
+  }));
 };
 var Display = function Display() {
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(Title, null), (0, _react2.jsx)(_index.Box, {
-    sx: sx.defaultFieldsWrapperBox
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+    sx: sx.container
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: {
@@ -251,27 +208,23 @@ var Display = function Display() {
     sx: sx.fieldColumnTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.fieldColumnTitle
-  }, "PingOne")), (0, _react2.jsx)(_index.Box, {
+  }, "Application")), (0, _react2.jsx)(_index.Box, {
     sx: sx.fieldColumnTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.fieldColumnTitle
-  }, "Google Suites"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
+  }, "PingOne"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
     withBadge: true,
-    leftValue: "UserId",
-    rightValue: "mdorey"
+    leftValue: "username",
+    rightValue: "User ID"
   }), (0, _react2.jsx)(Row, {
-    leftValue: "givenName",
-    rightValue: "firstName"
+    leftValue: "firstName",
+    rightValue: "Given Name"
   }), (0, _react2.jsx)(Row, {
-    leftValue: "familyName",
-    rightValue: "lastName"
+    leftValue: "lastName",
+    rightValue: "Family Name"
   }), (0, _react2.jsx)(Row, {
-    withTooltip: true,
     leftValue: "population",
-    rightValue: "population"
-  }), (0, _react2.jsx)(Row, {
-    leftValue: "password",
-    rightValue: "password"
+    rightValue: "Population"
   })));
 };
 exports.Display = Display;
@@ -283,7 +236,7 @@ Display.parameters = {
 };
 var DisplayWithError = function DisplayWithError() {
   var withError = true;
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(Title, null), (0, _react2.jsx)(_index.Callout, {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Callout, {
     status: _statuses["default"].ERROR,
     sx: sx.calloutSx
   }, (0, _react2.jsx)(_index.Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them.", (0, _react2.jsx)(_index.Link, {
@@ -292,7 +245,7 @@ var DisplayWithError = function DisplayWithError() {
     "aria-label": "".concat(_statuses["default"].ERROR, "-callout"),
     variant: "app"
   }, ' ', "Read More"))), (0, _react2.jsx)(_index.Box, {
-    sx: sx.defaultFieldsWrapperBox
+    sx: sx.container
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: {
@@ -302,22 +255,24 @@ var DisplayWithError = function DisplayWithError() {
     sx: sx.fieldColumnTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.fieldColumnTitle
-  }, "PingOne")), (0, _react2.jsx)(_index.Box, {
+  }, "Application")), (0, _react2.jsx)(_index.Box, {
     sx: sx.fieldColumnTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.fieldColumnTitle
-  }, "Google Suites"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
+  }, "PingOne"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
     withBadge: true,
-    leftValue: "UserId",
-    rightValue: "mdorey"
+    leftValue: "username",
+    rightValue: "User ID"
   }), (0, _react2.jsx)(Row, {
-    withError: withError,
-    leftValue: "givenName",
-    rightValue: "firstName"
+    leftValue: "firstName",
+    rightValue: "Given Name"
+  }), (0, _react2.jsx)(Row, {
+    leftValue: "lastName",
+    rightValue: "Family Name"
   }), (0, _react2.jsx)(Row, {
     withError: withError,
-    leftValue: "familyName",
-    rightValue: "lastName"
+    leftValue: "population",
+    rightValue: "Population"
   })));
 };
 exports.DisplayWithError = DisplayWithError;

package/lib/components/ListViewItem/ListViewItem.styles.js

@@ -35,10 +35,6 @@ var container = {
     borderBottomColor: 'line.light'
   }
 };
-var styledListItem = _objectSpread(_objectSpread({}, container), {}, {
-  padding: 0,
-  minHeight: 0
-});
 var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
   minHeight: '75px',
   height: '76px',
@@ -68,8 +64,49 @@ var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
     }
   }
 });
+var styledContainer = {
+  m: '1px',
+  minHeight: '72px',
+  '&.is-hovered': {
+    bg: 'white',
+    cursor: 'pointer'
+  }
+};
+var styledListItem = _objectSpread(_objectSpread({}, container), {}, {
+  minHeight: 0,
+  padding: 0
+});
+var controls = {
+  alignItems: 'center',
+  alignSelf: 'center',
+  flexShrink: 0,
+  ml: 'auto',
+  pr: 'sm'
+};
+var iconWrapper = {
+  cursor: 'pointer',
+  display: 'flex',
+  flex: '1 1 0px',
+  ml: 'md'
+};
+var imageWrapper = _objectSpread(_objectSpread({}, iconWrapper), {}, {
+  ml: 'sm'
+});
+var leftOfDataWrapper = _objectSpread(_objectSpread({}, iconWrapper), {}, {
+  ml: 0
+});
+var rightOfData = {
+  alignSelf: 'center',
+  flexShrink: 0
+};
 export default {
   container: container,
+  controls: controls,
+  iconWrapper: iconWrapper,
+  imageWrapper: imageWrapper,
+  leftOfDataWrapper: leftOfDataWrapper,
   linkedViewContainer: linkedViewContainer,
+  rightOfData: rightOfData,
+  styledContainer: styledContainer,
   styledListItem: styledListItem
 };

package/lib/components/Text/Text.styles.js

@@ -65,13 +65,34 @@ var itemTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
   color: 'text.primary',
   fontFamily: 'standard'
 });
+var bodyStrong = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  color: 'text.primary',
+  fontFamily: 'standard',
+  fontWeight: 1
+});
+var subtitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  color: 'text.secondary',
+  fontFamily: 'standard',
+  fontWeight: 0
+});
+var textEllipsis = {
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
+};
+var listViewItemText = _objectSpread(_objectSpread(_objectSpread({}, bodyStrong), textEllipsis), {}, {
+  alignSelf: 'start',
+  fontSize: 'md'
+});
+var listViewItemSubtext = _objectSpread(_objectSpread(_objectSpread({}, subtitle), textEllipsis), {}, {
+  alignSelf: 'start',
+  fontSize: 'sm',
+  lineHeight: '16px',
+  my: '1px'
+});
 export var text = {
   base: base,
-  bodyStrong: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontWeight: 1,
-    color: 'text.primary',
-    fontFamily: 'standard'
-  }),
+  bodyStrong: bodyStrong,
   bodyWeak: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'sm',
     color: 'text.secondary',
@@ -143,30 +164,22 @@ export var text = {
   listTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'md',
     fontWeight: 1,
-    color: 'text.primary',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  }),
+    color: 'text.primary'
+  }, textEllipsis),
   listSubtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'sm',
     fontWeight: 0,
-    color: 'text.secondary',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  }),
+    color: 'text.secondary'
+  }, textEllipsis),
+  listViewItemSubtext: listViewItemSubtext,
+  listViewItemText: listViewItemText,
   placeholder: {
     fontWeight: -1,
     color: 'text.secondary',
     fontFamily: 'standard'
   },
   sectionTitle: sectionTitle,
-  subtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontWeight: 0,
-    color: 'text.secondary',
-    fontFamily: 'standard'
-  }),
+  subtitle: subtitle,
   tabLabel: tabLabel,
   tableData: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'sm',
@@ -174,10 +187,6 @@ export var text = {
     color: 'text.primary',
     fontFamily: 'standard'
   }),
-  textEllipsis: {
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  },
+  textEllipsis: textEllipsis,
   title: title
 };

package/lib/experimental/ListViewItem/ListViewItem.js

@@ -1,78 +1,13 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["children", "className", "data", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef } from 'react';
 import { useHover } from '@react-aria/interactions';
 import { useStatusClasses } from '../../hooks';
 import { Box, Icon, Image, Text } from '../../index';
 import { listViewItemPropTypes } from './listViewItemAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var truncate = {
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap'
-};
-var sx = {
-  container: {
-    m: 1,
-    minHeight: 72,
-    '&.is-hovered': {
-      bg: 'white',
-      cursor: 'pointer'
-    }
-  },
-  controls: {
-    alignSelf: 'center',
-    ml: 'auto',
-    pr: 'sm',
-    flexShrink: 0
-  },
-  data: {
-    alignItems: 'center'
-  },
-  icon: {
-    width: 25,
-    color: 'accent.40'
-  },
-  image: {
-    width: 35
-  },
-  rightOfData: {
-    alignSelf: 'center',
-    ml: 'sm'
-  },
-  subtitle: _objectSpread(_objectSpread({}, truncate), {}, {
-    alignSelf: 'start',
-    fontSize: 'sm',
-    lineHeight: '16px',
-    my: '1px'
-  }),
-  text: {
-    ml: 'md'
-  },
-  title: _objectSpread(_objectSpread({}, truncate), {}, {
-    alignSelf: 'start',
-    fontSize: 'md'
-  }),
-  wrapper: {
-    cursor: 'pointer',
-    display: 'flex',
-    flex: '1 1 0px',
-    ml: 'md'
-  }
-};
 export var LIST_ITEM_ICON = '-list-item-icon';
 var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _context, _context2;
@@ -104,22 +39,15 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isSelected: isSelected
     }),
     classNames = _useStatusClasses.classNames;
-  var iff = function iff(condition, then, otherwise) {
-    return condition ? then : otherwise;
+  var getWrapperVariant = function getWrapperVariant() {
+    if (slots !== null && slots !== void 0 && slots.leftOfData) return 'listViewItem.leftOfDataWrapper';
+    if (image && !icon) return 'listViewItem.imageWrapper';
+    return 'listViewItem.iconWrapper';
   };
-  var wrapperStyles = slots !== null && slots !== void 0 && slots.leftOfData ? _objectSpread(_objectSpread({}, sx.wrapper), {}, {
-    ml: 0
-  }) : iff(!icon && image, _objectSpread(_objectSpread({}, sx.wrapper), {}, {
-    ml: 10
-  }), sx.wrapper);
-  var textStyles = slots !== null && slots !== void 0 && slots.leftOfData ? _objectSpread(_objectSpread({}, sx.text), {}, {
-    ml: 0
-  }) : iff(!icon && image, _objectSpread(_objectSpread({}, sx.wrapper), {}, {
-    ml: 10
-  }), sx.wrapper);
   var renderIcon = icon && ___EmotionJSX(Box, {
-    sx: sx.icon
+    width: "25px"
   }, ___EmotionJSX(Icon, {
+    color: "accent.40",
     icon: icon,
     size: "md",
     title: {
@@ -128,7 +56,7 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   }));
   var renderImage = !icon && image && ___EmotionJSX(Box, {
-    sx: sx.image
+    width: "35px"
   }, ___EmotionJSX(Image, {
     src: image.src,
     alt: image.alt,
@@ -136,32 +64,28 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
   var renderData = ___EmotionJSX(Box, {
     isRow: true,
-    sx: sx.data
+    alignItems: "center"
   }, (slots === null || slots === void 0 ? void 0 : slots.leftOfData) || renderIcon || renderImage, ___EmotionJSX(Box, {
-    sx: textStyles
+    variant: getWrapperVariant()
   }, text && ___EmotionJSX(Text, {
-    variant: "bodyStrong",
-    sx: sx.title
+    variant: "listViewItemText"
   }, text), subtext && ___EmotionJSX(Text, {
-    variant: "subtitle",
-    sx: sx.subtitle
+    variant: "listViewItemSubtext"
   }, subtext)));
   return ___EmotionJSX(Box, _extends({
     className: classNames,
     ref: ref,
-    sx: sx.container
+    variant: "listViewItem.styledContainer"
   }, hoverProps, others), ___EmotionJSX(Box, {
     isRow: true,
-    sx: wrapperStyles
+    variant: getWrapperVariant()
   }, renderData, (slots === null || slots === void 0 ? void 0 : slots.rightOfData) && ___EmotionJSX(Box, {
     isRow: true,
-    alignSelf: "center",
-    flexShrink: 0
+    variant: "listViewItem.rightOfData"
   }, slots.rightOfData), ___EmotionJSX(Box, {
     isRow: true,
     gap: "sm",
-    alignItems: "center",
-    sx: sx.controls
+    variant: "listViewItem.controls"
   }, children)));
 });
 ListViewItem.propTypes = listViewItemPropTypes;

package/lib/recipes/AttributeMapping.stories.js

@@ -7,10 +7,9 @@ import React, { memo, useEffect, useRef, useState } from 'react';
 import AddIcon from '@pingux/mdi-react/AddIcon';
 import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';
 import CogsIcon from '@pingux/mdi-react/CogsIcon';
-import CreateIcon from '@pingux/mdi-react/CreateIcon';
 import DeleteIcon from '@pingux/mdi-react/DeleteIcon';
 import { v4 as uuid } from 'uuid';
-import { Badge, Box, Button, Callout, ComboBoxField, HelpHint, Icon, IconButton, Item, Link, ScrollBox, Separator, Text, TextField } from '../index';
+import { Badge, Box, Button, Callout, ComboBoxField, Icon, IconButton, Item, Link, ScrollBox, Separator, Text, TextField } from '../index';
 import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
 import statuses from '../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -22,33 +21,26 @@ var sx = {
     position: 'absolute',
     right: '4px',
     top: '4px',
-    fill: '#A31300'
-  },
-  attributeMappingTitle: {
-    fontSize: 'lg',
-    lineHeight: '21px',
-    fontWeight: 3,
-    color: 'text.primary'
-  },
-  attributeMappingTitleWrapper: {
-    marginBottom: 'md',
-    alignItems: 'center'
+    fill: 'critical.bright'
   },
   badge: {
-    width: 'xx',
-    height: '22px',
     alignSelf: 'center',
-    minWidth: 'fit-content',
     border: '1px solid',
     borderColor: 'neutral.80',
-    backgroundColor: 'white !important',
-    marginLeft: 8,
+    backgroundColor: 'white',
+    marginLeft: 'sm',
     '& span': {
-      fontSize: 'sm',
       lineHeight: 1,
-      color: '#253746'
+      color: 'text.primary'
     }
   },
+  container: {
+    px: 'sm',
+    pt: 'sm',
+    pb: 'lg',
+    width: '450px',
+    backgroundColor: 'accent.99'
+  },
   calloutSx: {
     width: '450px',
     marginBottom: 'xs',
@@ -57,11 +49,6 @@ var sx = {
   createIconButton: {
     marginLeft: 'xs'
   },
-  defaultFieldsWrapperBox: {
-    padding: '10px 10px 24px 10px',
-    width: '450px',
-    backgroundColor: 'accent.99'
-  },
   fieldColumnTitle: {
     fontWeight: 3,
     fontSize: 'md',
@@ -76,13 +63,8 @@ var sx = {
     marginTop: 'sm'
   },
   separator: {
-    width: '21px',
+    width: '20px',
     margin: '0 2px'
-  },
-  tooltipBox: {
-    marginLeft: 'xs',
-    height: 'md',
-    width: 'md'
   }
 };
 var editSx = {
@@ -151,7 +133,6 @@ var editSx = {
 var helperTextId = uuid();
 var Row = function Row(props) {
   var withBadge = props.withBadge,
-    withTooltip = props.withTooltip,
     withError = props.withError,
     leftValue = props.leftValue,
     rightValue = props.rightValue;
@@ -199,35 +180,11 @@ var Row = function Row(props) {
   }), withBadge && ___EmotionJSX(Badge, {
     label: "Required",
     sx: sx.badge
-  }), withTooltip && ___EmotionJSX(Box, {
-    sx: sx.tooltipBox
-  }, ___EmotionJSX(HelpHint, {
-    tooltipProps: {
-      direction: 'bottom'
-    }
-  }, "Population set to default")));
-};
-var Title = function Title() {
-  return ___EmotionJSX(Box, {
-    isRow: true,
-    sx: sx.attributeMappingTitleWrapper
-  }, ___EmotionJSX(Text, {
-    sx: sx.attributeMappingTitle
-  }, "Attribute Mapping"), ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
-    sx: sx.createIconButton,
-    variant: "inverted",
-    "aria-label": "edit header button"
-  }, ___EmotionJSX(Icon, {
-    icon: CreateIcon,
-    size: "sm",
-    title: {
-      name: 'Create Icon'
-    }
-  }))));
+  }));
 };
 export var Display = function Display() {
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Title, null), ___EmotionJSX(Box, {
-    sx: sx.defaultFieldsWrapperBox
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+    sx: sx.container
   }, ___EmotionJSX(Box, {
     isRow: true,
     sx: {
@@ -237,27 +194,23 @@ export var Display = function Display() {
     sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
-  }, "PingOne")), ___EmotionJSX(Box, {
+  }, "Application")), ___EmotionJSX(Box, {
     sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
-  }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
+  }, "PingOne"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
     withBadge: true,
-    leftValue: "UserId",
-    rightValue: "mdorey"
+    leftValue: "username",
+    rightValue: "User ID"
   }), ___EmotionJSX(Row, {
-    leftValue: "givenName",
-    rightValue: "firstName"
+    leftValue: "firstName",
+    rightValue: "Given Name"
   }), ___EmotionJSX(Row, {
-    leftValue: "familyName",
-    rightValue: "lastName"
+    leftValue: "lastName",
+    rightValue: "Family Name"
   }), ___EmotionJSX(Row, {
-    withTooltip: true,
     leftValue: "population",
-    rightValue: "population"
-  }), ___EmotionJSX(Row, {
-    leftValue: "password",
-    rightValue: "password"
+    rightValue: "Population"
   })));
 };
 Display.parameters = {
@@ -268,7 +221,7 @@ Display.parameters = {
 };
 export var DisplayWithError = function DisplayWithError() {
   var withError = true;
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Title, null), ___EmotionJSX(Callout, {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Callout, {
     status: statuses.ERROR,
     sx: sx.calloutSx
   }, ___EmotionJSX(Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them.", ___EmotionJSX(Link, {
@@ -277,7 +230,7 @@ export var DisplayWithError = function DisplayWithError() {
     "aria-label": "".concat(statuses.ERROR, "-callout"),
     variant: "app"
   }, ' ', "Read More"))), ___EmotionJSX(Box, {
-    sx: sx.defaultFieldsWrapperBox
+    sx: sx.container
   }, ___EmotionJSX(Box, {
     isRow: true,
     sx: {
@@ -287,22 +240,24 @@ export var DisplayWithError = function DisplayWithError() {
     sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
-  }, "PingOne")), ___EmotionJSX(Box, {
+  }, "Application")), ___EmotionJSX(Box, {
     sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
-  }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
+  }, "PingOne"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
     withBadge: true,
-    leftValue: "UserId",
-    rightValue: "mdorey"
+    leftValue: "username",
+    rightValue: "User ID"
   }), ___EmotionJSX(Row, {
-    withError: withError,
-    leftValue: "givenName",
-    rightValue: "firstName"
+    leftValue: "firstName",
+    rightValue: "Given Name"
+  }), ___EmotionJSX(Row, {
+    leftValue: "lastName",
+    rightValue: "Family Name"
   }), ___EmotionJSX(Row, {
     withError: withError,
-    leftValue: "familyName",
-    rightValue: "lastName"
+    leftValue: "population",
+    rightValue: "Population"
   })));
 };
 export var Edit = function Edit() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.14.0",
+  "version": "2.14.1-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",