@pingux/astro 2.210.6-alpha.0 → 2.212.0-alpha.0

package/lib/components/LabelValuePairs/LabelValuePairsLabel.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "helpHint", "containerProps", "textProps", "helpHintProps"];
+import React, { forwardRef } from 'react';
+import { Box, HelpHint, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'PairLabel';
+var PairLabel = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+    helpHint = props.helpHint,
+    containerProps = props.containerProps,
+    textProps = props.textProps,
+    helpHintProps = props.helpHintProps,
+    others = _objectWithoutProperties(props, _excluded);
+  var _React$Children$toArr = React.Children.toArray(children),
+    _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
+    label = _React$Children$toArr2[0],
+    icon = _React$Children$toArr2[1];
+  return ___EmotionJSX(Box, _extends({
+    ref: ref,
+    isRow: true,
+    alignItems: "center",
+    gap: "sm"
+  }, others, containerProps), ___EmotionJSX(Text, _extends({
+    variant: "h4",
+    as: "h4"
+  }, textProps), label), icon, helpHint && ___EmotionJSX(HelpHint, _extends({
+    iconButtonProps: {
+      'aria-label': "".concat(label, " help hint")
+    }
+  }, helpHintProps), helpHint));
+});
+PairLabel.displayName = displayName;
+export default PairLabel;

package/lib/components/LabelValuePairs/LabelValuePairsRow.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import React, { forwardRef } from 'react';
+import { Box } from '../../index';
+import PairValue from './LabelValuePairsValue';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'Pair';
+var Pair = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+    others = _objectWithoutProperties(props, _excluded);
+  var childrenArray = React.Children.toArray(children);
+  var valueChild = _findInstanceProperty(childrenArray).call(childrenArray, function (child) {
+    return /*#__PURE__*/React.isValidElement(child) && child.type === PairValue;
+  });
+  var isLoading = valueChild === null || valueChild === void 0 ? void 0 : valueChild.props.isLoading;
+  var hasValueContent = Boolean(valueChild === null || valueChild === void 0 ? void 0 : valueChild.props.children);
+  if (!hasValueContent && !isLoading) {
+    return null;
+  }
+  return ___EmotionJSX(Box, _extends({
+    ref: ref,
+    variant: "labelValuePairs.fieldItem"
+  }, others), children);
+});
+Pair.displayName = displayName;
+export default Pair;

package/lib/components/LabelValuePairs/LabelValuePairsSubvalue.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React, { forwardRef } from 'react';
+import { Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'PairSubvalue';
+var PairSubvalue = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+    others = _objectWithoutProperties(props, _excluded);
+  return ___EmotionJSX(Text, _extends({
+    ref: ref,
+    variant: "variants.labelValuePairs.subLabel"
+  }, others), children);
+});
+PairSubvalue.displayName = displayName;
+export default PairSubvalue;

package/lib/components/LabelValuePairs/LabelValuePairsValue.js

@@ -0,0 +1,108 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"],
+  _excluded2 = ["children", "valueType", "isLoading", "containerProps", "textProps", "iconProps", "iconButtonProps", "skeletonProps"];
+import _repeatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/repeat";
+import React, { forwardRef, useState } from 'react';
+import EyeOffIcon from '@pingux/mdi-react/EyeOffOutlineIcon';
+import EyeIcon from '@pingux/mdi-react/EyeOutlineIcon';
+import { Box, CopyText, Icon, IconButton, Skeleton, Text } from '../../index';
+import { ValueTypes } from './constants';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'PairValue';
+var MASKED_ARIA_LABELS = {
+  SHOW: 'Show content',
+  HIDE: 'Hide content'
+};
+var ValueText = function ValueText(_ref) {
+  var children = _ref.children,
+    others = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX(Text, _extends({
+    variant: "variants.labelValuePairs.value"
+  }, others), children);
+};
+var MaskedValue = function MaskedValue(_ref2) {
+  var _context;
+  var value = _ref2.value,
+    containerProps = _ref2.containerProps,
+    textProps = _ref2.textProps,
+    iconProps = _ref2.iconProps,
+    iconButtonProps = _ref2.iconButtonProps;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isRevealed = _useState2[0],
+    setIsRevealed = _useState2[1];
+  var bullets = _repeatInstanceProperty(_context = '•').call(_context, value.length);
+  return ___EmotionJSX(Box, _extends({
+    isRow: true,
+    alignItems: "center",
+    gap: "sm"
+  }, containerProps), ___EmotionJSX(ValueText, _extends({
+    sx: isRevealed ? undefined : {
+      letterSpacing: '0.25em'
+    }
+  }, textProps), isRevealed ? value : bullets), ___EmotionJSX(IconButton, _extends({
+    "aria-label": isRevealed ? MASKED_ARIA_LABELS.HIDE : MASKED_ARIA_LABELS.SHOW,
+    onPress: function onPress() {
+      return setIsRevealed(function (prev) {
+        return !prev;
+      });
+    },
+    sx: {
+      width: 'fit-content',
+      marginLeft: 'sm',
+      alignSelf: 'auto'
+    }
+  }, iconButtonProps), ___EmotionJSX(Icon, _extends({
+    "aria-hidden": "true",
+    title: {
+      name: isRevealed ? 'Eye Icon' : 'Eye Off Icon'
+    },
+    icon: isRevealed ? EyeIcon : EyeOffIcon,
+    size: "sm"
+  }, iconProps))));
+};
+var PairValue = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+    valueType = props.valueType,
+    isLoading = props.isLoading,
+    containerProps = props.containerProps,
+    textProps = props.textProps,
+    iconProps = props.iconProps,
+    iconButtonProps = props.iconButtonProps,
+    skeletonProps = props.skeletonProps,
+    others = _objectWithoutProperties(props, _excluded2);
+  if (isLoading) {
+    return ___EmotionJSX(Box, _extends({
+      ref: ref,
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-label": "Loading"
+    }, others, containerProps), ___EmotionJSX(Skeleton, _extends({
+      variant: "text"
+    }, skeletonProps)));
+  }
+  switch (valueType) {
+    case ValueTypes.COPYABLE:
+      return ___EmotionJSX(CopyText, _extends({
+        ref: ref
+      }, others, containerProps), ___EmotionJSX(ValueText, textProps, children));
+    case ValueTypes.MASKED:
+      return ___EmotionJSX(MaskedValue, {
+        value: String(children),
+        containerProps: containerProps,
+        textProps: textProps,
+        iconProps: iconProps,
+        iconButtonProps: iconButtonProps
+      });
+    case ValueTypes.ELEMENT:
+      return children;
+    default:
+      return ___EmotionJSX(ValueText, _extends({
+        ref: ref
+      }, others, textProps), children);
+  }
+});
+PairValue.displayName = displayName;
+export default PairValue;

package/lib/components/LabelValuePairs/constants.js

@@ -0,0 +1,5 @@
+export var ValueTypes = {
+  COPYABLE: 'COPYABLE',
+  MASKED: 'MASKED',
+  ELEMENT: 'ELEMENT'
+};

package/lib/components/LabelValuePairs/index.js

@@ -0,0 +1,2 @@
+export * from './constants';
+export { default, Pair, PairLabel, PairSubvalue, PairValue } from './LabelValuePairs';

package/lib/components/LabelValuePairs/labelValuePairsAttributes.js

@@ -0,0 +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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
+export var labelValuePairsArgTypes = _objectSpread({}, ariaAttributeBaseArgTypes);

package/lib/components/Popover/Popover.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["arrowProps", "arrowCrossOffset", "direction", "popoverRef", "state", "children", "className", "isNonModal", "hasNoArrow", "width", "isDismissable", "isNotClosedOnBlur"];
+var _excluded = ["arrowProps", "arrowCrossOffset", "direction", "popoverRef", "state", "children", "className", "isNonModal", "hasNoArrow", "width", "isDismissable", "isNotClosedOnBlur", "offset"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as React from 'react';
@@ -33,9 +33,10 @@ var Popover = function Popover(props) {
     width = props.width,
     isDismissable = props.isDismissable,
     isNotClosedOnBlur = props.isNotClosedOnBlur,
+    offset = props.offset,
     others = _objectWithoutProperties(props, _excluded);
   var _usePopover = usePopover(_objectSpread(_objectSpread({}, props), {}, {
-      offset: 5,
+      offset: offset !== null && offset !== void 0 ? offset : 0,
       popoverRef: popoverRef
     }), state),
     popoverProps = _usePopover.popoverProps,

package/lib/components/Popover/Popover.test.js

@@ -64,4 +64,12 @@ describe('Popover', function () {
     expect((_screen$getByTestId$p = screen.getByTestId('popover').parentElement) === null || _screen$getByTestId$p === void 0 ? void 0 : _screen$getByTestId$p.querySelector('div')).toBeTruthy();
     expect(screen.getByTestId('popover')).toBeInTheDocument();
   });
+  test('accepts an offset prop and renders children correctly', function () {
+    getComponent({
+      state: mockState(true),
+      offset: 0
+    });
+    expect(screen.getByTestId('popover')).toBeInTheDocument();
+    expect(screen.getByTestId('popover-children')).toBeInTheDocument();
+  });
 });

package/lib/components/PopoverMenu/PopoverMenu.js

@@ -79,7 +79,8 @@ var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
     role: "presentation",
     triggerRef: triggerRef,
     state: state,
-    direction: direction
+    direction: direction,
+    offset: 5
   }), contents))));
 });
 PopoverMenu.defaultProps = {

package/lib/components/SearchField/SearchAutoComplete.js

@@ -147,7 +147,8 @@ export var SearchAutoComplete = /*#__PURE__*/forwardRef(function (props, ref) {
     triggerRef: outerRef,
     state: comboBoxState,
     isNonModal: true,
-    width: popoverWidth
+    width: popoverWidth,
+    offset: 5
   }, ___EmotionJSX(ScrollBox, {
     maxHeight: 200
   }, ___EmotionJSX(FocusScope, {

package/lib/hooks/useSelectField/useSelectField.js

@@ -128,7 +128,7 @@ var useSelectField = function useSelectField(props, ref) {
       shouldFlip: !isNotFlippable,
       isOpen: state.isOpen,
       onClose: state.close,
-      offset: 5
+      offset: 1
     }),
     overlayProps = _useOverlayPosition.overlayProps,
     placement = _useOverlayPosition.placement,

package/lib/index.js

@@ -109,6 +109,8 @@ export { default as Input } from './components/Input';
 export * from './components/Input';
 export { default as Label } from './components/Label';
 export * from './components/Label';
+export { default as LabelValuePairs } from './components/LabelValuePairs';
+export * from './components/LabelValuePairs';
 export { default as Link } from './components/Link';
 export * from './components/Link';
 export { default as LinkSelectField } from './components/LinkSelectField';
@@ -224,6 +226,7 @@ export * from './components/TextField';
 export { default as TimeField } from './components/TimeField';
 export * from './components/TimeField';
 export { default as TimeZonePicker } from './components/TimeZonePicker';
+export { default as timezones } from './components/TimeZonePicker/timezones';
 export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
 export { default as TreeView } from './components/TreeView';

package/lib/recipes/ListAndPanel.stories.js

@@ -11,11 +11,11 @@ import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
 import PlusIcon from '@pingux/mdi-react/PlusIcon';
 import { useOverlappingMenuHoverState, useOverlayPanelState } from '../hooks';
-import { AccordionGroup, Badge, Box, Breadcrumbs, Button, ButtonBar, EditButton, Icon, IconButton, Image, ImageUploadField, Link, ListView, ListViewItem, ListViewItemMenu, ListViewItemSwitchField, OverlayPanel, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField, SearchField, SelectField, Separator, Tab, Tabs, Text, TextField } from '../index';
+import { AccordionGroup, Badge, Box, Breadcrumbs, Button, ButtonBar, EditButton, Icon, IconButton, Image, ImageUploadField, LabelValuePairs, Link, ListView, ListViewItem, ListViewItemMenu, ListViewItemSwitchField, OverlayPanel, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField, SearchField, SelectField, Separator, Tab, Tabs, Text, TextField } from '../index';
 import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks';
 import UserImage from '../utils/devUtils/assets/UserImage.png';
 import { colorBlockButtons, editData, items, personalData } from './items';
-import { AddAttributeButton, ColorBlockButton, LabelValuePairs } from './PanelContent.stories';
+import { AddAttributeButton, ColorBlockButton } from './PanelContent.stories';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/List And Panel',
@@ -46,17 +46,6 @@ var sx = {
     top: 0,
     right: 0
   },
-  itemLabel: {
-    fontSize: 'sm',
-    fontWeight: 3,
-    lineHeight: '16px',
-    mb: 'xs'
-  },
-  itemValue: {
-    fontWeight: 0,
-    lineHeight: '18px',
-    mb: 'md'
-  },
   panelHeader: {
     container: {
       bg: 'accent.99',
@@ -198,11 +187,7 @@ export var ListAndPanel = function ListAndPanel() {
     }, ___EmotionJSX(Image, {
       src: UserImage,
       alt: "user"
-    }), ___EmotionJSX(LabelValuePairs, {
-      fields: personalData[item].fields
-    })) : ___EmotionJSX(LabelValuePairs, {
-      fields: personalData[item].fields
-    }), personalData[item].badges && ___EmotionJSX(Box, {
+    }), ___EmotionJSX(LabelValuePairs, null, personalData[item].rows)) : ___EmotionJSX(LabelValuePairs, null, personalData[item].rows), personalData[item].badges && ___EmotionJSX(Box, {
       isRow: true,
       gap: "sm"
     }, _mapInstanceProperty(_context3 = personalData[item].badges).call(_context3, function (badge) {

package/lib/recipes/PanelContent.stories.js

@@ -7,10 +7,9 @@ import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
 import PencilIcon from '@pingux/mdi-react/PencilIcon';
 import PlusIcon from '@pingux/mdi-react/PlusIcon';
 import { useOverlayPanelState } from '../hooks';
-import { AccordionGroup, Badge, Box, Breadcrumbs, Button, ButtonBar, EditButton, Icon, Image, ImageUploadField, Item, NoticeIcon, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField, SelectField, Tab, Tabs, Text, TextField } from '../index';
+import { AccordionGroup, Badge, Box, Breadcrumbs, Button, ButtonBar, EditButton, Icon, Image, ImageUploadField, Item, LabelValuePairs, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField, SelectField, Tab, Tabs, Text, TextField } from '../index';
 import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.ts';
 import UserImage from '../utils/devUtils/assets/UserImage.png';
-import statuses from '../utils/devUtils/constants/statuses';
 import { colorBlockButtons, editData, personalData } from './items';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -33,7 +32,8 @@ var OverlayWrapper = function OverlayWrapper(_ref) {
     state = _useOverlayPanelState.state;
   var triggerRef = useRef();
   var personalInfo = personalData.personalInfo;
-  var fields = personalInfo.fields;
+  var givenName = personalInfo.givenName,
+    familyName = personalInfo.familyName;
   var renderBreadcrumbs = ___EmotionJSX(Box, {
     width: "100%"
   }, ___EmotionJSX(Breadcrumbs, {
@@ -42,7 +42,7 @@ var OverlayWrapper = function OverlayWrapper(_ref) {
     "aria-label": personalInfo.label,
     href: "https://www.pingidentity.com",
     key: personalInfo.key
-  }, _concatInstanceProperty(_context = "".concat(fields[0].value, " ")).call(_context, fields[1].value)), ___EmotionJSX(Item, {
+  }, _concatInstanceProperty(_context = "".concat(givenName, " ")).call(_context, familyName)), ___EmotionJSX(Item, {
     "aria-label": "Edit",
     key: "editKey"
   }, "Edit")));
@@ -60,8 +60,8 @@ var OverlayWrapper = function OverlayWrapper(_ref) {
   } : {
     data: {
       image: image,
-      text: _concatInstanceProperty(_context2 = "".concat(fields[0].value, " ")).call(_context2, fields[1].value),
-      subtext: _concatInstanceProperty(_context3 = "".concat(fields[0].value.toLowerCase())).call(_context3, fields[1].value.toLowerCase())
+      text: _concatInstanceProperty(_context2 = "".concat(givenName, " ")).call(_context2, familyName),
+      subtext: _concatInstanceProperty(_context3 = "".concat(givenName.toLowerCase())).call(_context3, familyName.toLowerCase())
     }
   };
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
@@ -114,11 +114,7 @@ export var DisplayPanel = function DisplayPanel() {
     }, ___EmotionJSX(Image, {
       src: UserImage,
       alt: "user"
-    }), ___EmotionJSX(LabelValuePairs, {
-      fields: personalData[item].fields
-    })) : ___EmotionJSX(LabelValuePairs, {
-      fields: personalData[item].fields
-    }), personalData[item].badges && ___EmotionJSX(Box, {
+    }), ___EmotionJSX(LabelValuePairs, null, personalData[item].rows)) : ___EmotionJSX(LabelValuePairs, null, personalData[item].rows), personalData[item].badges && ___EmotionJSX(Box, {
       isRow: true,
       gap: "sm"
     }, _mapInstanceProperty(_context6 = personalData[item].badges).call(_context6, function (badge) {
@@ -208,38 +204,6 @@ export var ColorBlockButton = function ColorBlockButton(_ref2) {
     }
   }));
 };
-export var LabelValuePairs = function LabelValuePairs(_ref3) {
-  var _ref3$fields = _ref3.fields,
-    fields = _ref3$fields === void 0 ? personalData.contactInfo.fields : _ref3$fields;
-  return ___EmotionJSX(Box, {
-    gap: "md",
-    maxWidth: "675px"
-  }, _mapInstanceProperty(fields).call(fields, function (_ref4) {
-    var label = _ref4.label,
-      value = _ref4.value,
-      isVerified = _ref4.isVerified;
-    return ___EmotionJSX(Box, {
-      gap: "xs",
-      key: "".concat(label, "-key")
-    }, ___EmotionJSX(Text, {
-      variant: "h4"
-    }, label), ___EmotionJSX(Box, {
-      isRow: true,
-      gap: "md"
-    }, ___EmotionJSX(Text, null, value), isVerified && ___EmotionJSX(Box, {
-      isRow: true,
-      gap: "xs"
-    }, ___EmotionJSX(NoticeIcon, {
-      color: "success.dark",
-      status: statuses.SUCCESS,
-      "aria-label": "".concat(statuses.SUCCESS, "-icon"),
-      size: "xs"
-    }), ___EmotionJSX(Text, {
-      variant: "listSubtitle",
-      color: "success.dark"
-    }, "Verified"))));
-  }));
-};
 export var EditPanel = function EditPanel() {
   var _context7, _context8, _context9;
   return ___EmotionJSX(OverlayWrapper, {
@@ -281,10 +245,10 @@ export var EditPanel = function EditPanel() {
       previewHeight: 40,
       previewWidth: 40,
       previewImage: UserImage
-    }), _mapInstanceProperty(_context0 = editData[item].fields).call(_context0, function (_ref5) {
-      var label = _ref5.label,
-        value = _ref5.value,
-        slot = _ref5.slot;
+    }), _mapInstanceProperty(_context0 = editData[item].fields).call(_context0, function (_ref3) {
+      var label = _ref3.label,
+        value = _ref3.value,
+        slot = _ref3.slot;
       return ___EmotionJSX(Box, {
         key: "".concat(label, "-key")
       }, ___EmotionJSX(TextField, {

package/lib/recipes/items.js

@@ -1,9 +1,28 @@
 import React from 'react';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
-import { CheckboxField } from '../index';
+import { Box, CheckboxField, NoticeIcon, Pair, PairLabel, PairValue, Text, ValueTypes } from '../index';
 import UserImage from '../utils/devUtils/assets/UserImage.png';
+import statuses from '../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var VerifiedValue = function VerifiedValue(_ref) {
+  var value = _ref.value;
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md"
+  }, ___EmotionJSX(Text, null, value), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "xs"
+  }, ___EmotionJSX(NoticeIcon, {
+    color: "success.dark",
+    status: statuses.SUCCESS,
+    "aria-label": "".concat(statuses.SUCCESS, "-icon"),
+    size: "xs"
+  }), ___EmotionJSX(Text, {
+    variant: "listSubtitle",
+    color: "success.dark"
+  }, "Verified")));
+};
 export var items = [{
   email: 'dburkitt5@columbia.edu',
   firstName: 'Nicola',
@@ -70,58 +89,47 @@ export var items = [{
   lastName: 'Idel',
   icon: AccountIcon
 }];
+var H4Label = function H4Label(_ref2) {
+  var children = _ref2.children;
+  return ___EmotionJSX(PairLabel, {
+    textProps: {
+      as: 'h3'
+    }
+  }, children);
+};
 export var personalData = {
   contactInfo: {
     label: 'Contact Info',
     key: 'contactInfoKey',
-    fields: [{
-      label: 'Email',
-      value: 'ednepomuceno@pingidentity.com',
-      isVerified: true
-    }, {
-      label: 'Primary',
-      value: '+1 767-777-3333'
-    }, {
-      label: 'Address',
-      value: '1234 W California St, Denver CO 80101'
-    }]
+    rows: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Pair, null, ___EmotionJSX(H4Label, null, "Email"), ___EmotionJSX(PairValue, {
+      valueType: ValueTypes.ELEMENT
+    }, ___EmotionJSX(VerifiedValue, {
+      value: "ednepomuceno@pingidentity.com"
+    }))), ___EmotionJSX(Pair, null, ___EmotionJSX(H4Label, null, "Primary"), ___EmotionJSX(PairValue, null, "+1 767-777-3333")), ___EmotionJSX(Pair, null, ___EmotionJSX(H4Label, null, "Address"), ___EmotionJSX(PairValue, null, "1234 W California St, Denver CO 80101")))
   },
   personalInfo: {
     label: 'Personal Info',
     key: 'personalInfoKey',
     image: UserImage,
-    fields: [{
-      label: 'Given Name',
-      value: 'Ed'
-    }, {
-      label: 'Famile Name',
-      value: 'Nepomuceno'
-    }]
+    givenName: 'Ed',
+    familyName: 'Nepomuceno',
+    rows: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Pair, null, ___EmotionJSX(H4Label, null, "Given Name"), ___EmotionJSX(PairValue, null, "Ed")), ___EmotionJSX(Pair, null, ___EmotionJSX(H4Label, null, "Famile Name"), ___EmotionJSX(PairValue, null, "Nepomuceno")))
   },
   companyInfo: {
     label: 'Company Info',
     key: 'companyInfoKey',
-    fields: [{
-      label: 'Tile',
-      value: 'Interaction Designer'
-    }]
+    rows: ___EmotionJSX(Pair, null, ___EmotionJSX(H4Label, null, "Tile"), ___EmotionJSX(PairValue, null, "Interaction Designer"))
   },
   customAttributes: {
     label: 'Custom Attributes',
     key: 'customAttributesKey',
-    fields: [{
-      label: 'T-Shirt Size',
-      value: 'Large'
-    }, {
-      label: 'Example Multi-Value Attribute',
-      value: 'value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,'
-    }]
+    rows: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Pair, null, ___EmotionJSX(H4Label, null, "T-Shirt Size"), ___EmotionJSX(PairValue, null, "Large")), ___EmotionJSX(Pair, null, ___EmotionJSX(H4Label, null, "Example Multi-Value Attribute"), ___EmotionJSX(PairValue, null, "value,value,value,value,value,value,value,value,value,value, value,value,value,value,value,value,value,value,value,")))
   },
   jsonAttributes: {
     label: 'JSON Attributes',
     key: 'jsonAttributesKey',
     badges: ['Address', 'Contact', 'Another Json'],
-    fields: []
+    rows: null
   }
 };
 export var colorBlockButtons = [{

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'MaterialSymbolIcon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavList', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PhoneNumberField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'MaterialSymbolIcon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavList', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PhoneNumberField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField', 'LabelValuePairs'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

package/lib/styles/themes/next-gen/variants/variants.js

@@ -11,6 +11,7 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { astroTokens } from '@pingux/onyx-tokens';
 import attachment from '../../../../components/AIComponents/Attachment/Attachment.styles';
+import labelValuePairs from '../../../../components/LabelValuePairs/LabelValuePairs.styles';
 import skeleton from '../../../../components/Skeleton/Skeleton.styles';
 import codeView from '../codeView/codeView';
 import sizes from '../sizes';
@@ -469,6 +470,7 @@ export default {
   footer: footer,
   helpHint: helpHint,
   iconWrapper: iconWrapper,
+  labelValuePairs: labelValuePairs,
   listBox: listBox,
   listView: listView,
   listViewItem: listViewItem,

package/lib/styles/variants/variants.js

@@ -29,6 +29,7 @@ import footer from '../../components/Footer/Footer.styles';
 import gridList from '../../components/GridList/GridList.styles';
 import helpHint from '../../components/HelpHint/HelpHint.styles';
 import imageUpload from '../../components/ImageUploadField/imageUpload';
+import labelValuePairs from '../../components/LabelValuePairs/LabelValuePairs.styles';
 import listBox from '../../components/ListBox/ListBox.styles';
 import listItem from '../../components/ListItem/ListItem.styles';
 import listView from '../../components/ListView/ListView.styles';
@@ -85,6 +86,7 @@ export default _objectSpread(_objectSpread({
   gridList: gridList,
   helpHint: helpHint,
   imageUpload: imageUpload,
+  labelValuePairs: labelValuePairs,
   listBox: listBox,
   listItem: listItem,
   listView: listView,

package/lib/types/index.js

@@ -29,6 +29,7 @@ export * from './iconWrapper';
 export * from './input';
 export * from './item';
 export * from './label';
+export * from './labelValuePairs';
 export * from './link';
 export * from './listBox';
 export * from './listItem';

package/lib/types/labelValuePairs.js

@@ -0,0 +1 @@
+export {};

package/lib/utils/designUtils/figmaLinks.js

@@ -116,6 +116,9 @@ export var FIGMA_LINKS = {
   inlineEditing: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=5244-14864&mode=design&t=1pPbrQvGkdMYBNqk-0'
   },
+  labelValuePairs: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43431%3A4249&mode=dev'
+  },
   link: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=8708-29543&t=8Wwd3tIBh3GEjCJB-0'
   },