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

package/lib/cjs/recipes/items.js

@@ -11,7 +11,26 @@ var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon
 var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
 var _index = require("../index");
 var _UserImage = _interopRequireDefault(require("../utils/devUtils/assets/UserImage.png"));
+var _statuses = _interopRequireDefault(require("../utils/devUtils/constants/statuses"));
 var _react2 = require("@emotion/react");
+var VerifiedValue = function VerifiedValue(_ref) {
+  var value = _ref.value;
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md"
+  }, (0, _react2.jsx)(_index.Text, null, value), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "xs"
+  }, (0, _react2.jsx)(_index.NoticeIcon, {
+    color: "success.dark",
+    status: _statuses["default"].SUCCESS,
+    "aria-label": "".concat(_statuses["default"].SUCCESS, "-icon"),
+    size: "xs"
+  }), (0, _react2.jsx)(_index.Text, {
+    variant: "listSubtitle",
+    color: "success.dark"
+  }, "Verified")));
+};
 var items = exports.items = [{
   email: 'dburkitt5@columbia.edu',
   firstName: 'Nicola',
@@ -78,58 +97,47 @@ var items = exports.items = [{
   lastName: 'Idel',
   icon: _AccountIcon["default"]
 }];
+var H4Label = function H4Label(_ref2) {
+  var children = _ref2.children;
+  return (0, _react2.jsx)(_index.PairLabel, {
+    textProps: {
+      as: 'h3'
+    }
+  }, children);
+};
 var personalData = exports.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: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Pair, null, (0, _react2.jsx)(H4Label, null, "Email"), (0, _react2.jsx)(_index.PairValue, {
+      valueType: _index.ValueTypes.ELEMENT
+    }, (0, _react2.jsx)(VerifiedValue, {
+      value: "ednepomuceno@pingidentity.com"
+    }))), (0, _react2.jsx)(_index.Pair, null, (0, _react2.jsx)(H4Label, null, "Primary"), (0, _react2.jsx)(_index.PairValue, null, "+1 767-777-3333")), (0, _react2.jsx)(_index.Pair, null, (0, _react2.jsx)(H4Label, null, "Address"), (0, _react2.jsx)(_index.PairValue, null, "1234 W California St, Denver CO 80101")))
   },
   personalInfo: {
     label: 'Personal Info',
     key: 'personalInfoKey',
     image: _UserImage["default"],
-    fields: [{
-      label: 'Given Name',
-      value: 'Ed'
-    }, {
-      label: 'Famile Name',
-      value: 'Nepomuceno'
-    }]
+    givenName: 'Ed',
+    familyName: 'Nepomuceno',
+    rows: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Pair, null, (0, _react2.jsx)(H4Label, null, "Given Name"), (0, _react2.jsx)(_index.PairValue, null, "Ed")), (0, _react2.jsx)(_index.Pair, null, (0, _react2.jsx)(H4Label, null, "Famile Name"), (0, _react2.jsx)(_index.PairValue, null, "Nepomuceno")))
   },
   companyInfo: {
     label: 'Company Info',
     key: 'companyInfoKey',
-    fields: [{
-      label: 'Tile',
-      value: 'Interaction Designer'
-    }]
+    rows: (0, _react2.jsx)(_index.Pair, null, (0, _react2.jsx)(H4Label, null, "Tile"), (0, _react2.jsx)(_index.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: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Pair, null, (0, _react2.jsx)(H4Label, null, "T-Shirt Size"), (0, _react2.jsx)(_index.PairValue, null, "Large")), (0, _react2.jsx)(_index.Pair, null, (0, _react2.jsx)(H4Label, null, "Example Multi-Value Attribute"), (0, _react2.jsx)(_index.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
   }
 };
 var colorBlockButtons = exports.colorBlockButtons = [{

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

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.onyxOnlyRecipes = exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
-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'];
 var componentSpecificNextGenBlacklist = exports.componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -5761,6 +5761,23 @@ declare const _default: {
                 fontSize: any;
             };
         };
+        labelValuePairs: {
+            container: {
+                gap: string;
+            };
+            fieldItem: {
+                gap: string;
+            };
+            value: {
+                fontWeight: number;
+                color: string;
+            };
+            subLabel: {
+                fontSize: string;
+                fontWeight: number;
+                color: string;
+            };
+        };
         listBox: {
             container: {
                 p: any;

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -832,6 +832,23 @@ declare const _default: {
             fontSize: any;
         };
     };
+    labelValuePairs: {
+        container: {
+            gap: string;
+        };
+        fieldItem: {
+            gap: string;
+        };
+        value: {
+            fontWeight: number;
+            color: string;
+        };
+        subLabel: {
+            fontSize: string;
+            fontWeight: number;
+            color: string;
+        };
+    };
     listBox: {
         container: {
             p: any;

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

@@ -18,6 +18,7 @@ exports["default"] = exports.badgeDeleteButton = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _onyxTokens = require("@pingux/onyx-tokens");
 var _Attachment = _interopRequireDefault(require("../../../../components/AIComponents/Attachment/Attachment.styles"));
+var _LabelValuePairs = _interopRequireDefault(require("../../../../components/LabelValuePairs/LabelValuePairs.styles"));
 var _Skeleton = _interopRequireDefault(require("../../../../components/Skeleton/Skeleton.styles"));
 var _codeView = _interopRequireDefault(require("../codeView/codeView"));
 var _sizes = _interopRequireDefault(require("../sizes"));
@@ -479,6 +480,7 @@ var _default = exports["default"] = {
   footer: _footer.footer,
   helpHint: helpHint,
   iconWrapper: _iconWrapper["default"],
+  labelValuePairs: _LabelValuePairs["default"],
   listBox: listBox,
   listView: _listview.listView,
   listViewItem: _listview.listViewItem,

package/lib/cjs/styles/variants/variants.js

@@ -36,6 +36,7 @@ var _Footer = _interopRequireDefault(require("../../components/Footer/Footer.sty
 var _GridList = _interopRequireDefault(require("../../components/GridList/GridList.styles"));
 var _HelpHint = _interopRequireDefault(require("../../components/HelpHint/HelpHint.styles"));
 var _imageUpload = _interopRequireDefault(require("../../components/ImageUploadField/imageUpload"));
+var _LabelValuePairs = _interopRequireDefault(require("../../components/LabelValuePairs/LabelValuePairs.styles"));
 var _ListBox = _interopRequireDefault(require("../../components/ListBox/ListBox.styles"));
 var _ListItem = _interopRequireDefault(require("../../components/ListItem/ListItem.styles"));
 var _ListView = _interopRequireDefault(require("../../components/ListView/ListView.styles"));
@@ -95,6 +96,7 @@ var _default = exports["default"] = _objectSpread(_objectSpread({
   gridList: _GridList["default"],
   helpHint: _HelpHint["default"],
   imageUpload: _imageUpload["default"],
+  labelValuePairs: _LabelValuePairs["default"],
   listBox: _ListBox["default"],
   listItem: _ListItem["default"],
   listView: _ListView["default"],

package/lib/cjs/types/index.d.ts

@@ -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/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context0, _context1, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context0, _context1, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -348,8 +348,19 @@ _forEachInstanceProperty(_context29 = _Object$keys(_label)).call(_context29, fun
     }
   });
 });
+var _labelValuePairs = require("./labelValuePairs");
+_forEachInstanceProperty(_context30 = _Object$keys(_labelValuePairs)).call(_context30, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _labelValuePairs[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _labelValuePairs[key];
+    }
+  });
+});
 var _link = require("./link");
-_forEachInstanceProperty(_context30 = _Object$keys(_link)).call(_context30, function (key) {
+_forEachInstanceProperty(_context31 = _Object$keys(_link)).call(_context31, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _link[key]) return;
   _Object$defineProperty(exports, key, {
@@ -360,7 +371,7 @@ _forEachInstanceProperty(_context30 = _Object$keys(_link)).call(_context30, func
   });
 });
 var _listBox = require("./listBox");
-_forEachInstanceProperty(_context31 = _Object$keys(_listBox)).call(_context31, function (key) {
+_forEachInstanceProperty(_context32 = _Object$keys(_listBox)).call(_context32, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _listBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -371,7 +382,7 @@ _forEachInstanceProperty(_context31 = _Object$keys(_listBox)).call(_context31, f
   });
 });
 var _listItem = require("./listItem");
-_forEachInstanceProperty(_context32 = _Object$keys(_listItem)).call(_context32, function (key) {
+_forEachInstanceProperty(_context33 = _Object$keys(_listItem)).call(_context33, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _listItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -382,7 +393,7 @@ _forEachInstanceProperty(_context32 = _Object$keys(_listItem)).call(_context32,
   });
 });
 var _loader = require("./loader");
-_forEachInstanceProperty(_context33 = _Object$keys(_loader)).call(_context33, function (key) {
+_forEachInstanceProperty(_context34 = _Object$keys(_loader)).call(_context34, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _loader[key]) return;
   _Object$defineProperty(exports, key, {
@@ -393,7 +404,7 @@ _forEachInstanceProperty(_context33 = _Object$keys(_loader)).call(_context33, fu
   });
 });
 var _menu = require("./menu");
-_forEachInstanceProperty(_context34 = _Object$keys(_menu)).call(_context34, function (key) {
+_forEachInstanceProperty(_context35 = _Object$keys(_menu)).call(_context35, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -404,7 +415,7 @@ _forEachInstanceProperty(_context34 = _Object$keys(_menu)).call(_context34, func
   });
 });
 var _menuItem = require("./menuItem");
-_forEachInstanceProperty(_context35 = _Object$keys(_menuItem)).call(_context35, function (key) {
+_forEachInstanceProperty(_context36 = _Object$keys(_menuItem)).call(_context36, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menuItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -415,7 +426,7 @@ _forEachInstanceProperty(_context35 = _Object$keys(_menuItem)).call(_context35,
   });
 });
 var _menuSection = require("./menuSection");
-_forEachInstanceProperty(_context36 = _Object$keys(_menuSection)).call(_context36, function (key) {
+_forEachInstanceProperty(_context37 = _Object$keys(_menuSection)).call(_context37, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menuSection[key]) return;
   _Object$defineProperty(exports, key, {
@@ -426,7 +437,7 @@ _forEachInstanceProperty(_context36 = _Object$keys(_menuSection)).call(_context3
   });
 });
 var _messages = require("./messages");
-_forEachInstanceProperty(_context37 = _Object$keys(_messages)).call(_context37, function (key) {
+_forEachInstanceProperty(_context38 = _Object$keys(_messages)).call(_context38, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _messages[key]) return;
   _Object$defineProperty(exports, key, {
@@ -437,7 +448,7 @@ _forEachInstanceProperty(_context37 = _Object$keys(_messages)).call(_context37,
   });
 });
 var _Modal = require("./Modal");
-_forEachInstanceProperty(_context38 = _Object$keys(_Modal)).call(_context38, function (key) {
+_forEachInstanceProperty(_context39 = _Object$keys(_Modal)).call(_context39, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Modal[key]) return;
   _Object$defineProperty(exports, key, {
@@ -448,7 +459,7 @@ _forEachInstanceProperty(_context38 = _Object$keys(_Modal)).call(_context38, fun
   });
 });
 var _navBar = require("./navBar");
-_forEachInstanceProperty(_context39 = _Object$keys(_navBar)).call(_context39, function (key) {
+_forEachInstanceProperty(_context40 = _Object$keys(_navBar)).call(_context40, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _navBar[key]) return;
   _Object$defineProperty(exports, key, {
@@ -459,7 +470,7 @@ _forEachInstanceProperty(_context39 = _Object$keys(_navBar)).call(_context39, fu
   });
 });
 var _navSideBar = require("./navSideBar");
-_forEachInstanceProperty(_context40 = _Object$keys(_navSideBar)).call(_context40, function (key) {
+_forEachInstanceProperty(_context41 = _Object$keys(_navSideBar)).call(_context41, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _navSideBar[key]) return;
   _Object$defineProperty(exports, key, {
@@ -470,7 +481,7 @@ _forEachInstanceProperty(_context40 = _Object$keys(_navSideBar)).call(_context40
   });
 });
 var _overlayPanel = require("./overlayPanel");
-_forEachInstanceProperty(_context41 = _Object$keys(_overlayPanel)).call(_context41, function (key) {
+_forEachInstanceProperty(_context42 = _Object$keys(_overlayPanel)).call(_context42, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _overlayPanel[key]) return;
   _Object$defineProperty(exports, key, {
@@ -481,7 +492,7 @@ _forEachInstanceProperty(_context41 = _Object$keys(_overlayPanel)).call(_context
   });
 });
 var _passwordField = require("./passwordField");
-_forEachInstanceProperty(_context42 = _Object$keys(_passwordField)).call(_context42, function (key) {
+_forEachInstanceProperty(_context43 = _Object$keys(_passwordField)).call(_context43, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _passwordField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -492,7 +503,7 @@ _forEachInstanceProperty(_context42 = _Object$keys(_passwordField)).call(_contex
   });
 });
 var _phoneNumberField = require("./phoneNumberField");
-_forEachInstanceProperty(_context43 = _Object$keys(_phoneNumberField)).call(_context43, function (key) {
+_forEachInstanceProperty(_context44 = _Object$keys(_phoneNumberField)).call(_context44, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _phoneNumberField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -503,7 +514,7 @@ _forEachInstanceProperty(_context43 = _Object$keys(_phoneNumberField)).call(_con
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context44 = _Object$keys(_popoverContainer)).call(_context44, function (key) {
+_forEachInstanceProperty(_context45 = _Object$keys(_popoverContainer)).call(_context45, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -514,7 +525,7 @@ _forEachInstanceProperty(_context44 = _Object$keys(_popoverContainer)).call(_con
   });
 });
 var _popoverMenu = require("./popoverMenu");
-_forEachInstanceProperty(_context45 = _Object$keys(_popoverMenu)).call(_context45, function (key) {
+_forEachInstanceProperty(_context46 = _Object$keys(_popoverMenu)).call(_context46, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverMenu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -525,7 +536,7 @@ _forEachInstanceProperty(_context45 = _Object$keys(_popoverMenu)).call(_context4
   });
 });
 var _progressBar = require("./progressBar");
-_forEachInstanceProperty(_context46 = _Object$keys(_progressBar)).call(_context46, function (key) {
+_forEachInstanceProperty(_context47 = _Object$keys(_progressBar)).call(_context47, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _progressBar[key]) return;
   _Object$defineProperty(exports, key, {
@@ -536,7 +547,7 @@ _forEachInstanceProperty(_context46 = _Object$keys(_progressBar)).call(_context4
   });
 });
 var _requirementsList = require("./requirementsList");
-_forEachInstanceProperty(_context47 = _Object$keys(_requirementsList)).call(_context47, function (key) {
+_forEachInstanceProperty(_context48 = _Object$keys(_requirementsList)).call(_context48, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _requirementsList[key]) return;
   _Object$defineProperty(exports, key, {
@@ -547,7 +558,7 @@ _forEachInstanceProperty(_context47 = _Object$keys(_requirementsList)).call(_con
   });
 });
 var _rockerButtonGroup = require("./rockerButtonGroup");
-_forEachInstanceProperty(_context48 = _Object$keys(_rockerButtonGroup)).call(_context48, function (key) {
+_forEachInstanceProperty(_context49 = _Object$keys(_rockerButtonGroup)).call(_context49, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
   _Object$defineProperty(exports, key, {
@@ -558,7 +569,7 @@ _forEachInstanceProperty(_context48 = _Object$keys(_rockerButtonGroup)).call(_co
   });
 });
 var _scrollBox = require("./scrollBox");
-_forEachInstanceProperty(_context49 = _Object$keys(_scrollBox)).call(_context49, function (key) {
+_forEachInstanceProperty(_context50 = _Object$keys(_scrollBox)).call(_context50, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _scrollBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -569,7 +580,7 @@ _forEachInstanceProperty(_context49 = _Object$keys(_scrollBox)).call(_context49,
   });
 });
 var _searchField = require("./searchField");
-_forEachInstanceProperty(_context50 = _Object$keys(_searchField)).call(_context50, function (key) {
+_forEachInstanceProperty(_context51 = _Object$keys(_searchField)).call(_context51, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _searchField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -580,7 +591,7 @@ _forEachInstanceProperty(_context50 = _Object$keys(_searchField)).call(_context5
   });
 });
 var _separator = require("./separator");
-_forEachInstanceProperty(_context51 = _Object$keys(_separator)).call(_context51, function (key) {
+_forEachInstanceProperty(_context52 = _Object$keys(_separator)).call(_context52, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -591,7 +602,7 @@ _forEachInstanceProperty(_context51 = _Object$keys(_separator)).call(_context51,
   });
 });
 var _ServerErrorBoundary = require("./ServerErrorBoundary");
-_forEachInstanceProperty(_context52 = _Object$keys(_ServerErrorBoundary)).call(_context52, function (key) {
+_forEachInstanceProperty(_context53 = _Object$keys(_ServerErrorBoundary)).call(_context53, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _ServerErrorBoundary[key]) return;
   _Object$defineProperty(exports, key, {
@@ -602,7 +613,7 @@ _forEachInstanceProperty(_context52 = _Object$keys(_ServerErrorBoundary)).call(_
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context53 = _Object$keys(_shared)).call(_context53, function (key) {
+_forEachInstanceProperty(_context54 = _Object$keys(_shared)).call(_context54, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -613,7 +624,7 @@ _forEachInstanceProperty(_context53 = _Object$keys(_shared)).call(_context53, fu
   });
 });
 var _skeleton = require("./skeleton");
-_forEachInstanceProperty(_context54 = _Object$keys(_skeleton)).call(_context54, function (key) {
+_forEachInstanceProperty(_context55 = _Object$keys(_skeleton)).call(_context55, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _skeleton[key]) return;
   _Object$defineProperty(exports, key, {
@@ -624,7 +635,7 @@ _forEachInstanceProperty(_context54 = _Object$keys(_skeleton)).call(_context54,
   });
 });
 var _Stepper = require("./Stepper");
-_forEachInstanceProperty(_context55 = _Object$keys(_Stepper)).call(_context55, function (key) {
+_forEachInstanceProperty(_context56 = _Object$keys(_Stepper)).call(_context56, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Stepper[key]) return;
   _Object$defineProperty(exports, key, {
@@ -635,7 +646,7 @@ _forEachInstanceProperty(_context55 = _Object$keys(_Stepper)).call(_context55, f
   });
 });
 var _switchField = require("./switchField");
-_forEachInstanceProperty(_context56 = _Object$keys(_switchField)).call(_context56, function (key) {
+_forEachInstanceProperty(_context57 = _Object$keys(_switchField)).call(_context57, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _switchField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -646,7 +657,7 @@ _forEachInstanceProperty(_context56 = _Object$keys(_switchField)).call(_context5
   });
 });
 var _tab = require("./tab");
-_forEachInstanceProperty(_context57 = _Object$keys(_tab)).call(_context57, function (key) {
+_forEachInstanceProperty(_context58 = _Object$keys(_tab)).call(_context58, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tab[key]) return;
   _Object$defineProperty(exports, key, {
@@ -657,7 +668,7 @@ _forEachInstanceProperty(_context57 = _Object$keys(_tab)).call(_context57, funct
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context58 = _Object$keys(_table)).call(_context58, function (key) {
+_forEachInstanceProperty(_context59 = _Object$keys(_table)).call(_context59, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -668,7 +679,7 @@ _forEachInstanceProperty(_context58 = _Object$keys(_table)).call(_context58, fun
   });
 });
 var _tabs = require("./tabs");
-_forEachInstanceProperty(_context59 = _Object$keys(_tabs)).call(_context59, function (key) {
+_forEachInstanceProperty(_context60 = _Object$keys(_tabs)).call(_context60, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tabs[key]) return;
   _Object$defineProperty(exports, key, {
@@ -679,7 +690,7 @@ _forEachInstanceProperty(_context59 = _Object$keys(_tabs)).call(_context59, func
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context60 = _Object$keys(_text)).call(_context60, function (key) {
+_forEachInstanceProperty(_context61 = _Object$keys(_text)).call(_context61, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -690,7 +701,7 @@ _forEachInstanceProperty(_context60 = _Object$keys(_text)).call(_context60, func
   });
 });
 var _textField = require("./textField");
-_forEachInstanceProperty(_context61 = _Object$keys(_textField)).call(_context61, function (key) {
+_forEachInstanceProperty(_context62 = _Object$keys(_textField)).call(_context62, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _textField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -701,7 +712,7 @@ _forEachInstanceProperty(_context61 = _Object$keys(_textField)).call(_context61,
   });
 });
 var _timefield = require("./timefield");
-_forEachInstanceProperty(_context62 = _Object$keys(_timefield)).call(_context62, function (key) {
+_forEachInstanceProperty(_context63 = _Object$keys(_timefield)).call(_context63, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _timefield[key]) return;
   _Object$defineProperty(exports, key, {
@@ -712,7 +723,7 @@ _forEachInstanceProperty(_context62 = _Object$keys(_timefield)).call(_context62,
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context63 = _Object$keys(_tooltipTrigger)).call(_context63, function (key) {
+_forEachInstanceProperty(_context64 = _Object$keys(_tooltipTrigger)).call(_context64, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/labelValuePairs.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { TestingAttributes } from './shared/test';
+import { BoxProps } from './box';
+import { HelpHintProps } from './helpHint';
+import { IconProps } from './icon';
+import { IconButtonProps } from './iconButton';
+import { SkeletonProps } from './skeleton';
+import { TextProps } from './text';
+export type ValueType = 'COPYABLE' | 'MASKED' | 'ELEMENT';
+interface LabelValuePairsSubComponentProps {
+    containerProps?: BoxProps & TestingAttributes;
+    textProps?: TextProps & TestingAttributes;
+    iconProps?: IconProps;
+}
+export interface LabelValuePairsContainerProps extends BoxProps, TestingAttributes {
+    children?: ReactNode;
+}
+export type LabelValuePairsProps = LabelValuePairsContainerProps;
+export type LabelValuePairsRowProps = LabelValuePairsContainerProps;
+export interface LabelValuePairsLabelProps extends TestingAttributes, Omit<LabelValuePairsSubComponentProps, 'iconProps'> {
+    children?: ReactNode;
+    helpHint?: ReactNode;
+    helpHintProps?: HelpHintProps;
+}
+export interface LabelValuePairsValueProps extends TestingAttributes, LabelValuePairsSubComponentProps {
+    children?: ReactNode;
+    valueType?: ValueType;
+    isLoading?: boolean;
+    iconButtonProps?: IconButtonProps;
+    skeletonProps?: SkeletonProps;
+}
+export interface LabelValuePairsSubvalueProps extends TestingAttributes, TextProps {
+    children?: ReactNode;
+}
+export {};

package/lib/cjs/types/labelValuePairs.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -116,6 +116,9 @@ export declare const FIGMA_LINKS: {
     inlineEditing: {
         default: string;
     };
+    labelValuePairs: {
+        default: string;
+    };
     link: {
         default: string;
     };

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -123,6 +123,9 @@ var FIGMA_LINKS = exports.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/lib/components/LabelValuePairs/LabelValuePairs.js

@@ -0,0 +1,35 @@
+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 { Box } from '../../index';
+import PairLabel from './LabelValuePairsLabel';
+import Pair from './LabelValuePairsRow';
+import PairSubvalue from './LabelValuePairsSubvalue';
+import PairValue from './LabelValuePairsValue';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'LabelValuePairs';
+var LabelValuePairs = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+    others = _objectWithoutProperties(props, _excluded);
+  return ___EmotionJSX(Box, _extends({
+    ref: ref,
+    variant: "labelValuePairs.container"
+  }, others), children);
+});
+LabelValuePairs.displayName = displayName;
+
+// The subcomponents are exported bare under a `Pair*` naming family (`Pair`, `PairLabel`,
+// `PairValue`, `PairSubvalue`) as the primary, terser usage — the short `Row`/`Label` names
+// can't be exported bare from the top-level barrel (`libs/astro/src/index.ts`) because they
+// already resolve to unrelated exports there: `Label` (a form-label component) and `Row`
+// (from react-stately). Prefixing sidesteps that collision. Static properties are also
+// attached so the namespaced `<LabelValuePairs.Row>` / `.Label` / `.Value` / `.Subvalue`
+// access keeps working; inside the namespace the short names are unambiguous.
+var LabelValuePairsWithSubcomponents = LabelValuePairs;
+LabelValuePairsWithSubcomponents.Row = Pair;
+LabelValuePairsWithSubcomponents.Label = PairLabel;
+LabelValuePairsWithSubcomponents.Value = PairValue;
+LabelValuePairsWithSubcomponents.Subvalue = PairSubvalue;
+export default LabelValuePairsWithSubcomponents;
+export { Pair, PairLabel, PairSubvalue, PairValue };