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

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/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';

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'
   },

package/package.json

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