@pingux/astro 2.143.0-alpha.0 → 2.143.0-alpha.1

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

@@ -47,11 +47,16 @@ var wrapper = {
 var rightOfData = {
   alignSelf: 'center'
 };
+var iconWrapper = {
+  width: '25px',
+  mx: 'md'
+};
 var _default = {
   container: container,
   controls: controls,
   data: data,
   emptyData: emptyData,
+  iconWrapper: iconWrapper,
   rightOfData: rightOfData,
   wrapper: wrapper
 };

package/lib/cjs/components/PanelHeader/PanelHeader.test.js

@@ -39,6 +39,12 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react3.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, defaultProps, props)));
 };
+var getComponentOnyx = function getComponentOnyx() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react3.jsx)(_index.AstroProvider, {
+    themeOverrides: [_index.OnyxTheme]
+  }, (0, _react3.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, defaultProps, props))));
+};
 var fallbackImageObj = null;
 jest.mock('../../hooks/useFallbackImage', function () {
   return function (props) {
@@ -100,4 +106,20 @@ test('renders rightOfData slot', function () {
     }
   });
   _testWrapper.screen.getByText(TEST_TEXT);
+});
+test('renders leftOfData slot', function () {
+  var TEST_TEXT = 'test text';
+  getComponent({
+    slots: {
+      leftOfData: (0, _react3.jsx)("div", null, TEST_TEXT)
+    }
+  });
+  _testWrapper.screen.getByText(TEST_TEXT);
+});
+test('renders onyx components', function () {
+  getComponentOnyx();
+  var image = _testWrapper.screen.getByRole('img');
+  expect(image.tagName.toLowerCase()).toBe('img');
+  expect(image).toHaveAttribute('src', _images.pingImg);
+  expect(image).toHaveAttribute('alt', 'Avatar');
 });

package/lib/cjs/components/RequirementsList/RequirementsList.js

@@ -13,11 +13,8 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
-var _AlertOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertOutlineIcon"));
-var _CheckboxBlankCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckboxBlankCircleOutlineIcon"));
-var _CheckCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCircleIcon"));
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
+var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Text = _interopRequireDefault(require("../Text"));
@@ -28,6 +25,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var requirements = props.requirements,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    icons = _useGetTheme.icons;
+  var SuccessCircle = icons.SuccessCircle,
+    ErrorCircle = icons.ErrorCircle,
+    WarningIcon = icons.WarningIcon,
+    DefaultCircle = icons.DefaultCircle;
   var statusIconRender = function statusIconRender(status, key) {
     switch (status) {
       case 'success':
@@ -36,7 +39,7 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
             id: key,
             name: 'Success Status Icon'
           },
-          icon: _CheckCircleIcon["default"],
+          icon: SuccessCircle,
           color: "success.bright",
           mr: "sm",
           size: "sm",
@@ -48,7 +51,7 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
             id: key,
             name: 'Warning Status Icon'
           },
-          icon: _AlertOutlineIcon["default"],
+          icon: WarningIcon,
           color: "warning.bright",
           mr: "sm",
           size: "sm",
@@ -60,7 +63,7 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
             id: key,
             name: 'Error Status Icon'
           },
-          icon: _AlertCircleIcon["default"],
+          icon: ErrorCircle,
           color: "critical.bright",
           mr: "sm",
           size: "sm",
@@ -72,7 +75,7 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
             id: key,
             name: 'Empty Status Icon'
           },
-          icon: _CheckboxBlankCircleOutlineIcon["default"],
+          icon: DefaultCircle,
           color: "neutral.40",
           mr: "sm",
           size: "sm",

package/lib/cjs/components/Stepper/Step.js

@@ -39,7 +39,7 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: className
   }), status === COMPLETED && !isHovered ? (0, _react2.jsx)(_index.Icon, {
     icon: _CheckBoldIcon["default"],
-    size: 23,
+    size: "sm",
     color: "text.primaryLight",
     title: {
       name: 'Check Bold Icon'

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

@@ -91,6 +91,7 @@ var stepBase = {
   fontSize: '17px',
   fontWeight: 3,
   cursor: 'pointer',
+  fontFamily: 'standard',
   '&[aria-expanded="true"]': {
     backgroundColor: 'active',
     borderColor: 'active',

package/lib/cjs/components/Switch/Switch.js

@@ -13,6 +13,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -24,21 +25,30 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *
  * **Note: Requires a label. It's recommended to use `SwitchField` for a complete solution.**
  */var Switch = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var inputProps = props.inputProps;
+  var inputProps = props.inputProps,
+    isSelected = props.isSelected;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)('', {
+      isSelected: isSelected
+    }),
+    classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    className: classNames,
     variant: "forms.switch.container"
   }, props), (0, _react2.jsx)(_reactAria.VisuallyHidden, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "input"
   }, inputProps, {
     ref: ref
   }))), (0, _react2.jsx)(_Box["default"], {
+    className: classNames,
     variant: "forms.switch.thumbContainer"
   }, (0, _react2.jsx)(_Box["default"], {
+    className: classNames,
     variant: "forms.switch.thumb"
   })));
 });
 Switch.propTypes = {
-  inputProps: _propTypes["default"].shape({})
+  inputProps: _propTypes["default"].shape({}),
+  isSelected: _propTypes["default"].bool
 };
 Switch.displayName = 'Switch';
 var _default = Switch;

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

@@ -58,7 +58,7 @@ var thumb = {
   transitionTimingFunction: 'ease-out',
   transitionDuration: '0.1s',
   transform: 'translateX(0)',
-  'label.is-selected &': {
+  '&.is-selected': {
     transform: 'translateX(20px)',
     borderColor: 'active'
   }

package/lib/cjs/components/SwitchField/SwitchField.js

@@ -61,8 +61,9 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       'aria-label': others['aria-label'] || 'switch-field'
     }), state, switchRef),
     inputProps = _useSwitch.inputProps;
+  var isSelected = (_inputProps$checked = inputProps.checked) !== null && _inputProps$checked !== void 0 ? _inputProps$checked : false;
   var statusClasses = {
-    isSelected: (_inputProps$checked = inputProps.checked) !== null && _inputProps$checked !== void 0 ? _inputProps$checked : false
+    isSelected: isSelected
   };
   var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread(_objectSpread({
       statusClasses: statusClasses
@@ -77,7 +78,10 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     'aria-controls': others['aria-controls'],
     'aria-errormessage': others['aria-errormessage']
   };
-  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps, {
+    alignSelf: "top",
+    alignItems: "start"
+  }), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
     variant: "forms.switch.label"
   }, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, fieldControlWrapperProps, {
     sx: _objectSpread(_objectSpread({}, fieldControlWrapperProps.sx), {}, {
@@ -85,6 +89,7 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     })
   }), (0, _react2.jsx)(_.Switch, (0, _extends2["default"])({
     ref: switchRef,
+    isSelected: isSelected,
     inputProps: fieldControlInputProps,
     name: name
   }, unhandledAriaProps, (0, _omit["default"])(others, 'data-pendo-id', 'aria-label')))), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {

package/lib/cjs/components/Tabs/Tabs.stories.js

@@ -59,13 +59,25 @@ var _default = {
 };
 exports["default"] = _default;
 var tabs = [{
-  name: 'Tab 1',
-  children: (0, _react2.jsx)(_index.Text, null, "Tab 1 body")
+  name: 'Overview',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
 }, {
-  name: 'Tab 2',
-  children: (0, _react2.jsx)(_index.Text, null, "Tab 2 body")
+  name: 'Configuration',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
+}, {
+  name: 'Resources',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
+}, {
+  name: 'Policies',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
+}, {
+  name: 'Attribute Mappings',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
+}, {
+  name: 'Access',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
 }, {
-  name: 'Tab 3',
+  name: 'Integration',
   children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
 }];
 var customTabs = [{
@@ -96,7 +108,11 @@ var Controlled = function Controlled() {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     currentTab = _useState2[0],
     setCurrentTab = _useState2[1];
-  return (0, _react2.jsx)(_index.Tabs, {
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      maxWidth: '500px'
+    }
+  }, (0, _react2.jsx)(_index.Tabs, {
     selectedKey: currentTab,
     onSelectionChange: setCurrentTab,
     items: tabs
@@ -106,7 +122,7 @@ var Controlled = function Controlled() {
       title: item.name,
       textValue: item.name
     }, item.children);
-  });
+  }));
 };
 exports.Controlled = Controlled;
 var Centered = function Centered() {

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

@@ -3,5 +3,6 @@ import { TextProps } from '../../types';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const Default: StoryFn<TextProps>;
+export declare const Onyx: StoryFn<TextProps>;
 export declare const CustomWidth: StoryFn;
 export declare const CustomStyle: StoryFn;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = exports.CustomWidth = exports.CustomStyle = void 0;
+exports["default"] = exports.Onyx = exports.Default = exports.CustomWidth = exports.CustomStyle = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
@@ -429,6 +429,359 @@ var Default = function Default() {
   }))));
 };
 exports.Default = Default;
+var Onyx = function Onyx() {
+  var _context7, _context8, _context9, _context10, _context11, _context12;
+  var fontSizesOnyx = {
+    xxx: '33.8px (xxx)',
+    xl: '22.5px (xl)',
+    lg: '18.8px (lg)',
+    md: '15px (md)',
+    sm: '12px (sm)',
+    xs: '11px (xs)',
+    h2: '26.3px (h2)'
+  };
+  var fontWeightsOnyx = {
+    '-1': '300 (-1)',
+    '0': '400 (0)',
+    '1': '500 (1)',
+    '2': '600 (2)',
+    '3': '700 (3)'
+  };
+  var headingVariants = {
+    H1: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.xxx,
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "H1",
+        as: "h1"
+      }, '<Text variant="H1" as="H1"/>')
+    },
+    H2: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.h2,
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "H2",
+        as: "h2"
+      }, '<Text variant="H2" as="H2"/>')
+    },
+    H3: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.xl,
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "H3",
+        as: "h3"
+      }, '<Text variant="H3" as="H3"/>')
+    },
+    H4: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.lg,
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "H4",
+        as: "h4"
+      }, '<Text variant="H4" as="H4"/>')
+    },
+    H5: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.md,
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "H5",
+        as: "h5"
+      }, '<Text variant="H5" as="H5"/>')
+    },
+    H6: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.sm,
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "H6",
+        as: "h6"
+      }, '<Text variant="H6" as="H6"/>')
+    }
+  };
+  var baseAndSubtitleVariants = {
+    'Base (default variant of Text)': {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.md,
+      color: 'text.primary',
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "base",
+        fontWeight: "0"
+      }, '<Text variant="base"/>')
+    },
+    Subtitle: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.sm,
+      color: 'text.secondary',
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "subtitle"
+      }, '<Text variant="subtitle"/>')
+    }
+  };
+  var largeVariants = {
+    Bold: {
+      weight: fontWeightsOnyx[3],
+      fontSize: fontSizesOnyx.lg,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "lg",
+        fontWeight: "3"
+      }, '<Text fontSize="lg" fontWeight="3">')
+    },
+    Semibold: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.lg,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "lg",
+        fontWeight: "2"
+      }, '<Text fontSize="lg" fontWeight="2">')
+    },
+    Regular: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.lg,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "lg",
+        fontWeight: "0"
+      }, '<Text fontSize="lg" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeightsOnyx[-1],
+      fontSize: fontSizesOnyx.lg,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "lg",
+        fontWeight: "0"
+      }, '<Text fontSize="lg" fontWeight="0">')
+    }
+  };
+  var mediumVariants = {
+    Bold: {
+      weight: fontWeightsOnyx[3],
+      fontSize: fontSizesOnyx.md,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "md",
+        fontWeight: "3"
+      }, '<Text fontSize="md" fontWeight="3">')
+    },
+    Semibold: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.md,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "md",
+        fontWeight: "2"
+      }, '<Text fontSize="md" fontWeight="2">')
+    },
+    Regular: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.md,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "md",
+        fontWeight: "0"
+      }, '<Text fontSize="md" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeightsOnyx[-1],
+      fontSize: fontSizesOnyx.md,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "md",
+        fontWeight: "-1"
+      }, '<Text fontSize="md" fontWeight="-1">')
+    }
+  };
+  var smallVariants = {
+    Bold: {
+      weight: fontWeightsOnyx[3],
+      fontSize: fontSizesOnyx.sm,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "sm",
+        fontWeight: "3"
+      }, '<Text fontSize="sm" fontWeight="3">')
+    },
+    Semibold: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.sm,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "sm",
+        fontWeight: "2"
+      }, '<Text fontSize="sm" fontWeight="2">')
+    },
+    Regular: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.sm,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "sm",
+        fontWeight: "0"
+      }, '<Text fontSize="sm" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeightsOnyx[-1],
+      fontSize: fontSizesOnyx.sm,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "sm",
+        fontWeight: "-1"
+      }, '<Text fontSize="sm" fontWeight="-1">')
+    }
+  };
+  var xsmallVariants = {
+    Bold: {
+      weight: fontWeightsOnyx[3],
+      fontSize: fontSizesOnyx.xs,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "xs",
+        fontWeight: "3"
+      }, '<Text fontSize="xs" fontWeight="3">')
+    },
+    Semibold: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.xs,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "xs",
+        fontWeight: "2"
+      }, '<Text fontSize="xs" fontWeight="2">')
+    },
+    Regular: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.xs,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "xs",
+        fontWeight: "0"
+      }, '<Text fontSize="xs" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeightsOnyx[-1],
+      fontSize: fontSizesOnyx.xs,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "xs",
+        fontWeight: "-1"
+      }, '<Text fontSize="xs" fontWeight="-1">')
+    }
+  };
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Table, {
+    mb: "xx"
+  }, (0, _react2.jsx)(TableHeading, {
+    title: "Heading"
+  }), (0, _react2.jsx)(_index.TableBody, {
+    sx: sx.tableBody
+  }, (0, _map["default"])(_context7 = (0, _entries["default"])(headingVariants)).call(_context7, function (_ref15) {
+    var _ref16 = (0, _slicedToArray2["default"])(_ref15, 2),
+      key = _ref16[0],
+      value = _ref16[1];
+    return (0, _react2.jsx)(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), (0, _react2.jsx)(_index.Table, {
+    mb: "xx"
+  }, (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
+    key: "head"
+  }, (0, _react2.jsx)(_index.TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "60%"
+  }, "Base and Subtitle"), (0, _react2.jsx)(_index.TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "20%"
+  }, "Weight"), (0, _react2.jsx)(_index.TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "30%"
+  }, "Size"), (0, _react2.jsx)(_index.TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "40%"
+  }, "Color"), (0, _react2.jsx)(_index.TableCell, {
+    sx: sx.cell,
+    isHeading: true
+  }, "Example"))), (0, _react2.jsx)(_index.TableBody, {
+    sx: sx.tableBody
+  }, (0, _map["default"])(_context8 = (0, _entries["default"])(baseAndSubtitleVariants)).call(_context8, function (_ref17) {
+    var _ref18 = (0, _slicedToArray2["default"])(_ref17, 2),
+      key = _ref18[0],
+      value = _ref18[1];
+    return (0, _react2.jsx)(_index.TableRow, {
+      sx: {
+        backgroundColor: 'transparent !important'
+      },
+      key: key
+    }, (0, _react2.jsx)(_index.TableCell, {
+      sx: sx.cell,
+      width: "60%"
+    }, (0, _react2.jsx)(_index.Text, null, key)), (0, _react2.jsx)(_index.TableCell, {
+      sx: sx.cell,
+      width: "20%"
+    }, (0, _react2.jsx)(_index.Text, null, value.weight)), (0, _react2.jsx)(_index.TableCell, {
+      sx: sx.cell,
+      width: "30%"
+    }, (0, _react2.jsx)(_index.Text, null, value.fontSize)), (0, _react2.jsx)(_index.TableCell, {
+      sx: sx.cell,
+      width: "40%"
+    }, (0, _react2.jsx)(_index.Text, null, value.color)), (0, _react2.jsx)(_index.TableCell, {
+      sx: sx.cell
+    }, value.example));
+  }))), (0, _react2.jsx)(_index.Table, {
+    mb: "xx"
+  }, (0, _react2.jsx)(TableHeading, {
+    title: "Large"
+  }), (0, _react2.jsx)(_index.TableBody, {
+    sx: sx.tableBody
+  }, (0, _map["default"])(_context9 = (0, _entries["default"])(largeVariants)).call(_context9, function (_ref19) {
+    var _ref20 = (0, _slicedToArray2["default"])(_ref19, 2),
+      key = _ref20[0],
+      value = _ref20[1];
+    return (0, _react2.jsx)(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), (0, _react2.jsx)(_index.Table, {
+    mb: "xx"
+  }, (0, _react2.jsx)(TableHeading, {
+    title: "Medium"
+  }), (0, _react2.jsx)(_index.TableBody, {
+    sx: sx.tableBody
+  }, (0, _map["default"])(_context10 = (0, _entries["default"])(mediumVariants)).call(_context10, function (_ref21) {
+    var _ref22 = (0, _slicedToArray2["default"])(_ref21, 2),
+      key = _ref22[0],
+      value = _ref22[1];
+    return (0, _react2.jsx)(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), (0, _react2.jsx)(_index.Table, {
+    mb: "xx"
+  }, (0, _react2.jsx)(TableHeading, {
+    title: "Small"
+  }), (0, _react2.jsx)(_index.TableBody, {
+    sx: sx.tableBody
+  }, (0, _map["default"])(_context11 = (0, _entries["default"])(smallVariants)).call(_context11, function (_ref23) {
+    var _ref24 = (0, _slicedToArray2["default"])(_ref23, 2),
+      key = _ref24[0],
+      value = _ref24[1];
+    return (0, _react2.jsx)(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), (0, _react2.jsx)(_index.Table, {
+    mb: "xx"
+  }, (0, _react2.jsx)(TableHeading, {
+    title: "XSmall"
+  }), (0, _react2.jsx)(_index.TableBody, {
+    sx: sx.tableBody
+  }, (0, _map["default"])(_context12 = (0, _entries["default"])(xsmallVariants)).call(_context12, function (_ref25) {
+    var _ref26 = (0, _slicedToArray2["default"])(_ref25, 2),
+      key = _ref26[0],
+      value = _ref26[1];
+    return (0, _react2.jsx)(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))));
+};
+exports.Onyx = Onyx;
+Default.parameters = {
+  codesandbox: false
+};
 var CustomWidth = function CustomWidth(args) {
   return (0, _react2.jsx)(_index.Box, {
     width: 200

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

@@ -121,6 +121,16 @@ export declare const text: {
         color: string;
         fontFamily: string;
     };
+    pageHeaderBody: {
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: overflowWrap;
+        maxWidth: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
+    };
     panelHeaderSubtext: {
         textOverflow: string;
         overflow: string;

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

@@ -236,6 +236,11 @@ var text = _objectSpread(_objectSpread(_objectSpread({
     color: 'text.secondary',
     fontFamily: 'standard'
   },
+  pageHeaderBody: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    color: 'text.secondary',
+    fontFamily: 'standard'
+  }),
   panelHeaderSubtext: _objectSpread(_objectSpread({}, listViewItemSubtext), textEllipsis),
   panelHeaderText: _objectSpread(_objectSpread({}, listViewItemText), textEllipsis),
   sectionTitle: sectionTitle,