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

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 };

package/lib/components/LabelValuePairs/LabelValuePairs.mdx

@@ -0,0 +1,69 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as LabelValuePairsStories from './LabelValuePairs.stories';
+
+<Meta of={LabelValuePairsStories} isTemplate />
+
+# LabelValuePairs
+
+LabelValuePairs renders a vertical list of labelled key/value rows. It is intended for read-only detail views such as slide-over panels, summary tabs, and profile pages.
+
+Pairs are composed from child components. Each pair supports four value display modes, an optional help hint tooltip, a secondary sub-label, and an optional inline label icon or action element. Pairs with a falsy value are suppressed unless the pair is in a loading state.
+
+```jsx
+import { Icon, LabelValuePairs, Pair, PairLabel, PairValue, PairSubvalue } from '@pingux/astro';
+
+<LabelValuePairs>
+  <Pair>
+    <PairLabel helpHint="...">
+      Username
+      <Icon aria-hidden="true" title={{ name: '' }} icon={InformationIcon} />
+    </PairLabel>
+    <PairSubvalue>Optional secondary text</PairSubvalue>
+    <PairValue valueType={ValueTypes.COPYABLE}>jsmith</PairValue>
+  </Pair>
+</LabelValuePairs>
+```
+
+### Required Components
+
+`LabelValuePairs` is a public composition API, not a standalone data-driven component. Each pair must be composed from these building blocks, available both as named exports (`Pair`, `PairLabel`, `PairValue`, `PairSubvalue`) and, equivalently, as static properties on the parent (`LabelValuePairs.Row`, `.Label`, `.Value`, `.Subvalue`):
+
+- **`Pair`** — wraps one labelled entry. Expects a `PairLabel`, optionally a `PairSubvalue`, and a `PairValue` as children. Suppresses itself (renders nothing) when its `PairValue` child's content is falsy and not loading.
+- **`PairLabel`** — the pair's heading text, rendered as an `<h5>`. Accepts an optional `helpHint` prop. Its first child is the label text; an optional second child renders alongside it as an icon or action element (e.g. an `Icon` or `IconButton`).
+- **`PairValue`** — the pair's value content. Accepts `valueType` (see Value Types below) and `isLoading`.
+- **`PairSubvalue`** — optional secondary text rendered beneath the label.
+
+### Value Types
+
+Use the exported `ValueTypes` constant to select the display mode for a `PairValue`'s content.
+
+| `valueType` | Behavior |
+| ---- | --------- |
+| _(omitted)_ | Renders the value as plain `Text`. |
+| `ValueTypes.COPYABLE` | Wraps the value in `CopyText`, adding a copy-to-clipboard button. |
+| `ValueTypes.MASKED` | Displays bullet characters by default. An eye toggle reveals or hides the real value. |
+| `ValueTypes.ELEMENT` | Renders `Value`'s children directly as a React node — use for custom content. |
+
+### Loading State
+
+Set `isLoading` on `PairValue` to replace the value area with a skeleton placeholder. The pair still renders its label normally, and it renders even when `PairValue` has no children — useful when data is being fetched.
+
+### Accessibility
+
+This component adheres to standard heading and landmark semantics.
+
+#### Keyboard Navigation
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | Moves focus through interactive elements: copy buttons, masked value toggles, and help hint triggers. |
+| Space or Enter | Activates the focused button (copy, show/hide, or help hint). |
+| Escape | Closes an open help hint popover. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- Each label heading is rendered as an **`<h5>`** element, preserving document outline semantics.
+- The `helpHint` trigger button uses **`aria-label`** derived from the row label (e.g. `"Client ID help hint"`).
+- The masked value toggle uses **`aria-label="Show content"`** or **`"Hide content"`** to reflect the current state.
+- Loading rows use **`role="alert"`** and **`aria-live="assertive"`** on the skeleton container so screen readers announce when content becomes available.

package/lib/components/LabelValuePairs/LabelValuePairs.stories.js

@@ -0,0 +1,102 @@
+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 React from 'react';
+import CheckIcon from '@pingux/mdi-react/CheckIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Box, IconWrapper, LabelValuePairs, NoticeIcon, Pair, PairLabel, PairSubvalue, PairValue, Text, ValueTypes } from '../..';
+import { useGetTheme } from '../../hooks';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
+import statuses from '../../utils/devUtils/constants/statuses';
+import LabelValuePairsReadme from './LabelValuePairs.mdx';
+import { labelValuePairsArgTypes } from './labelValuePairsAttributes';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/LabelValuePairs',
+  component: LabelValuePairs,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(LabelValuePairsReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
+  argTypes: _objectSpread({}, labelValuePairsArgTypes)
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(LabelValuePairs, args, ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "Username"), ___EmotionJSX(PairValue, null, "jsmith")), ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "Email"), ___EmotionJSX(PairValue, null, "jsmith@example.com")), ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "Role"), ___EmotionJSX(PairValue, null, "Administrator")));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.labelValuePairs["default"]
+  }
+};
+export var WithCopyableValues = function WithCopyableValues(args) {
+  return ___EmotionJSX(LabelValuePairs, args, ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "API Key"), ___EmotionJSX(PairValue, {
+    valueType: ValueTypes.COPYABLE
+  }, "abc123def456ghi789")), ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "Client Secret"), ___EmotionJSX(PairValue, {
+    valueType: ValueTypes.COPYABLE
+  }, "supersecretvalue")));
+};
+export var WithMaskedValue = function WithMaskedValue(args) {
+  return ___EmotionJSX(LabelValuePairs, args, ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "Password"), ___EmotionJSX(PairValue, {
+    valueType: ValueTypes.MASKED
+  }, "mypassword123")));
+};
+export var WithHelpHint = function WithHelpHint(args) {
+  return ___EmotionJSX(LabelValuePairs, args, ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, {
+    helpHint: "This is the unique identifier for your OAuth application."
+  }, "Client ID"), ___EmotionJSX(PairValue, null, "client-abc-123")));
+};
+export var WithSubLabel = function WithSubLabel(args) {
+  return ___EmotionJSX(LabelValuePairs, args, ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "Domain"), ___EmotionJSX(PairSubvalue, null, "The primary domain for your environment."), ___EmotionJSX(PairValue, null, "example.com")));
+};
+export var WithLabelIcon = function WithLabelIcon(args) {
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
+  var icon = isOnyx ? ___EmotionJSX(IconWrapper, {
+    icon: CheckIcon,
+    color: "green",
+    size: "xs",
+    isCircle: true,
+    title: {
+      name: 'Verified'
+    },
+    iconProps: {
+      size: 'sm'
+    }
+  }) : ___EmotionJSX(NoticeIcon, {
+    color: "green",
+    status: statuses.SUCCESS,
+    "aria-label": "".concat(statuses.SUCCESS, "-icon"),
+    size: "xs"
+  });
+  return ___EmotionJSX(LabelValuePairs, args, ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "Status", ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "xs",
+    alignItems: "center"
+  }, icon, ___EmotionJSX(Text, {
+    variant: "listSubtitle",
+    color: isOnyx ? 'darkgreen' : 'green'
+  }, "Verified"))), ___EmotionJSX(PairValue, null, "Active")));
+};
+export var WithLoadingState = function WithLoadingState(args) {
+  return ___EmotionJSX(Box, {
+    width: "200px"
+  }, ___EmotionJSX(LabelValuePairs, args, ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "Username"), ___EmotionJSX(PairValue, {
+    isLoading: true
+  })), ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "Email"), ___EmotionJSX(PairValue, {
+    isLoading: true
+  })), ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "Role"), ___EmotionJSX(PairValue, {
+    isLoading: true
+  }))));
+};

package/lib/components/LabelValuePairs/LabelValuePairs.styles.js

@@ -0,0 +1,21 @@
+var container = {
+  gap: 'md'
+};
+var fieldItem = {
+  gap: 'xs'
+};
+var value = {
+  fontWeight: 0,
+  color: 'secondary'
+};
+var subLabel = {
+  fontSize: 'sm',
+  fontWeight: 0,
+  color: 'secondary'
+};
+export default {
+  container: container,
+  fieldItem: fieldItem,
+  value: value,
+  subLabel: subLabel
+};