@pingux/astro 1.32.1-alpha.7 → 1.33.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.32.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.32.0...@pingux/astro@1.32.1) (2022-10-25)
+
+
+### Bug Fixes
+
+* [UIP-5724] Add alt text to user icon in storybook ([a4dd785](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a4dd7854573a3704ddef75178ceab0141fd9b158))
+* [UIP-5727] Fix and update conditional filter recipe ([904a44b](https://gitlab.corp.pingidentity.com/ux/pingux/commit/904a44bd9971afced3f49cd525c5c4fb7a130f1a))
+* [UIP-5754] ListView - fix infinity list keyboard navigation ([33275f0](https://gitlab.corp.pingidentity.com/ux/pingux/commit/33275f0bf9f7b40301b3ca6c233b91b7d98f9e7f))
+* [UIP-5759] Selection shift fix for Logo Tabs recipe ([97490cd](https://gitlab.corp.pingidentity.com/ux/pingux/commit/97490cd7ac37140edb33067531d2e75e506e9bf6))
+* [UIP-5763] Fix stepper contrast issue ([adb17f7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/adb17f7e51869fcfaf8d748ee44631defedd12f7))
+* [UIP-5771] ComboBox Fix Focus of Items ([63a6431](https://gitlab.corp.pingidentity.com/ux/pingux/commit/63a6431a9f36cf12596ce542cd2d325401d81d4f))
+* [UIP-5788] Fix popover for combobox and multivalues field components ([e993be8](https://gitlab.corp.pingidentity.com/ux/pingux/commit/e993be8d86a850c66f8aa126b819591791487ef0))
+
+
+
+
+
 # [1.32.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.31.1...@pingux/astro@1.32.0) (2022-10-19)
 
 

package/lib/cjs/components/AccordionGridItem/AccordionGridItem.js

@@ -101,9 +101,12 @@ var AccordionGridItem = function AccordionGridItem(props) {
   delete rowProps.onPointerDown;
   delete rowProps.onClick;
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    as: "div"
+    as: "div",
+    role: "row",
+    tabindex: "0"
   }, (0, _utils.mergeProps)(rowProps, others), {
     "aria-selected": isSelected,
+    "aria-expanded": isSelected,
     className: classNames,
     variant: "accordion.accordionGridItem",
     ref: rowRef

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

@@ -10,109 +10,430 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = exports.WithCustomWidth = exports.TypographyStyleProps = exports.Default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
 
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _themeUi = require("theme-ui");
-
-var _Text = _interopRequireDefault(require("./Text"));
-
-var _variants = require("../../utils/devUtils/constants/variants.js");
-
-var _colors = require("../../styles/colors.js");
-
 var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "bg"];
-
-var _context;
-
 var _default = {
   title: 'Text',
-  component: _Text["default"],
+  component: _index.Text,
   argTypes: {
     variant: {
       control: {
-        type: 'select',
-        options: (0, _values["default"])(_variants.textVariants)
+        type: 'none'
       },
-      description: 'Text variant.',
-      defaultValue: (0, _values["default"])(_variants.textVariants)[0]
+      description: 'Text variant.'
     },
     children: {
       control: {
-        type: 'text'
-      },
-      table: {
-        type: {
-          summary: 'string'
-        }
+        type: 'none'
       },
-      description: 'Text value.',
-      defaultValue: 'Hi, this is some text!'
+      description: 'Text value.'
     },
     color: {
       control: {
-        type: 'select',
-        options: (0, _concat["default"])(_context = [undefined]).call(_context, (0, _map["default"])(_colors.flatColorList).call(_colors.flatColorList, function (_ref) {
-          var _ref2 = (0, _slicedToArray2["default"])(_ref, 1),
-              colorName = _ref2[0];
-
-          return colorName;
-        }))
-      },
-      table: {
-        type: {
-          summary: 'string'
-        }
+        type: 'none'
       },
-      description: 'Text color.',
-      defaultValue: undefined
+      description: 'Text color.'
     },
     bg: {
       control: {
-        type: 'select',
-        options: (0, _map["default"])(_colors.flatColorList).call(_colors.flatColorList, function (_ref3) {
-          var _ref4 = (0, _slicedToArray2["default"])(_ref3, 1),
-              colorName = _ref4[0];
-
-          return colorName;
-        })
-      },
-      table: {
-        type: {
-          summary: 'string'
-        }
+        type: 'none'
       },
-      description: 'Background color.',
-      defaultValue: 'white'
+      description: 'Background color.'
     }
   }
 };
 exports["default"] = _default;
+var sx = {
+  cell: {
+    wordWrap: 'break-word',
+    wordBreak: 'break-word'
+  },
+  tableBody: {
+    borderBottom: 'unset'
+  }
+};
 
-var Default = function Default(_ref5) {
-  var children = _ref5.children,
-      bg = _ref5.bg,
-      args = (0, _objectWithoutProperties2["default"])(_ref5, _excluded);
-  return (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
-    bg: bg
-  }, args, {
-    p: "xl"
-  }), children);
+var TableHeading = function TableHeading(_ref) {
+  var title = _ref.title;
+  return (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
+    key: "head"
+  }, (0, _react2.jsx)(_index.TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "30%"
+  }, title), (0, _react2.jsx)(_index.TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "30%"
+  }, "Weight"), (0, _react2.jsx)(_index.TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "30%"
+  }, "Size"), (0, _react2.jsx)(_index.TableCell, {
+    sx: sx.cell,
+    isHeading: true
+  }, "Example")));
+};
+
+var TableData = function TableData(_ref2) {
+  var variant = _ref2.variant,
+      value = _ref2.value;
+  return (0, _react2.jsx)(_index.TableRow, {
+    sx: {
+      backgroundColor: 'transparent !important',
+      alignItems: 'center'
+    }
+  }, (0, _react2.jsx)(_index.TableCell, {
+    sx: sx.cell,
+    width: "30%"
+  }, (0, _react2.jsx)(_index.Text, null, variant)), (0, _react2.jsx)(_index.TableCell, {
+    sx: sx.cell,
+    width: "30%"
+  }, (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
+  }, (0, _react2.jsx)(_index.Text, null, value.example)));
+};
+
+var Default = function Default() {
+  var _context, _context2, _context3, _context4, _context5, _context6;
+
+  var fontSizes = {
+    xx: '23px (xx)',
+    lg: '17px (lg)',
+    md: '15px (md)',
+    sm: '13px (sm)',
+    xs: '11px (xs)'
+  };
+  var fontWeights = {
+    '-1': '300 (-1)',
+    '0': '400 (0)',
+    '1': '500 (1)',
+    '3': '700 (3)'
+  };
+  var headingVariants = {
+    H1: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.xx,
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "H1",
+        as: "H1"
+      }, '<Text variant="H1" as="H1"/>')
+    },
+    H2: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.lg,
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "H2",
+        as: "H2"
+      }, '<Text variant="H2" as="H2"/>')
+    },
+    H3: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.md,
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "H3",
+        as: "H3"
+      }, '<Text variant="H3" as="H3"/>')
+    },
+    H4: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.sm,
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "H4",
+        as: "H4"
+      }, '<Text variant="H4" as="H4"/>')
+    }
+  };
+  var baseAndSubtitleVariants = {
+    'Base (default variant of Text)': {
+      weight: fontWeights[1],
+      fontSize: fontSizes.md,
+      color: 'text.primary',
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "base"
+      }, '<Text variant="base"/>')
+    },
+    Subtitle: {
+      weight: fontWeights[0],
+      fontSize: fontSizes.sm,
+      color: 'text.secondary',
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "subtitle"
+      }, '<Text variant="subtitle"/>')
+    }
+  };
+  var largeVariants = {
+    Bold: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.lg,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "lg",
+        fontWeight: "3"
+      }, '<Text fontSize="lg" fontWeight="3">')
+    },
+    Medium: {
+      weight: fontWeights[1],
+      fontSize: fontSizes.lg,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "lg",
+        fontWeight: "1"
+      }, '<Text fontSize="lg" fontWeight="1">')
+    },
+    Regular: {
+      weight: fontWeights[0],
+      fontSize: fontSizes.lg,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "lg",
+        fontWeight: "0"
+      }, '<Text fontSize="lg" fontWeight="0">')
+    }
+  };
+  var mediumVariants = {
+    Bold: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.md,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "md",
+        fontWeight: "3"
+      }, '<Text fontSize="md" fontWeight="3">')
+    },
+    Medium: {
+      weight: fontWeights[1],
+      fontSize: fontSizes.md,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "md",
+        fontWeight: "1"
+      }, '<Text fontSize="md" fontWeight="1">')
+    },
+    Regular: {
+      weight: fontWeights[0],
+      fontSize: fontSizes.md,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "md",
+        fontWeight: "0"
+      }, '<Text fontSize="md" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeights[-1],
+      fontSize: fontSizes.md,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "md",
+        fontWeight: "-1"
+      }, '<Text fontSize="md" fontWeight="-1">')
+    }
+  };
+  var smallVariants = {
+    Bold: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.sm,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "sm",
+        fontWeight: "3"
+      }, '<Text fontSize="sm" fontWeight="3">')
+    },
+    Medium: {
+      weight: fontWeights[1],
+      fontSize: fontSizes.sm,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "sm",
+        fontWeight: "1"
+      }, '<Text fontSize="sm" fontWeight="1">')
+    },
+    Regular: {
+      weight: fontWeights[0],
+      fontSize: fontSizes.sm,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "sm",
+        fontWeight: "0"
+      }, '<Text fontSize="sm" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeights[-1],
+      fontSize: fontSizes.sm,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "sm",
+        fontWeight: "-1"
+      }, '<Text fontSize="sm" fontWeight="-1">')
+    }
+  };
+  var xsmallVariants = {
+    Bold: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.xs,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "xs",
+        fontWeight: "3"
+      }, '<Text fontSize="xs" fontWeight="3">')
+    },
+    Medium: {
+      weight: fontWeights[1],
+      fontSize: fontSizes.xs,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "xs",
+        fontWeight: "1"
+      }, '<Text fontSize="xs" fontWeight="1">')
+    },
+    Regular: {
+      weight: fontWeights[0],
+      fontSize: fontSizes.xs,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "xs",
+        fontWeight: "0"
+      }, '<Text fontSize="xs" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeights[-1],
+      fontSize: fontSizes.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"])(_context = (0, _entries["default"])(headingVariants)).call(_context, function (_ref3) {
+    var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[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"])(_context2 = (0, _entries["default"])(baseAndSubtitleVariants)).call(_context2, function (_ref5) {
+    var _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
+        key = _ref6[0],
+        value = _ref6[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: "25%"
+    }, (0, _react2.jsx)(_index.Text, null, value.weight)), (0, _react2.jsx)(_index.TableCell, {
+      sx: sx.cell,
+      width: "35%"
+    }, (0, _react2.jsx)(_index.Text, null, value.fontSize)), (0, _react2.jsx)(_index.TableCell, {
+      sx: sx.cell,
+      width: "45%"
+    }, (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"])(_context3 = (0, _entries["default"])(largeVariants)).call(_context3, function (_ref7) {
+    var _ref8 = (0, _slicedToArray2["default"])(_ref7, 2),
+        key = _ref8[0],
+        value = _ref8[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"])(_context4 = (0, _entries["default"])(mediumVariants)).call(_context4, function (_ref9) {
+    var _ref10 = (0, _slicedToArray2["default"])(_ref9, 2),
+        key = _ref10[0],
+        value = _ref10[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"])(_context5 = (0, _entries["default"])(smallVariants)).call(_context5, function (_ref11) {
+    var _ref12 = (0, _slicedToArray2["default"])(_ref11, 2),
+        key = _ref12[0],
+        value = _ref12[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"])(_context6 = (0, _entries["default"])(xsmallVariants)).call(_context6, function (_ref13) {
+    var _ref14 = (0, _slicedToArray2["default"])(_ref13, 2),
+        key = _ref14[0],
+        value = _ref14[1];
+
+    return (0, _react2.jsx)(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))));
 };
 
 exports.Default = Default;
@@ -120,7 +441,7 @@ exports.Default = Default;
 var WithCustomWidth = function WithCustomWidth() {
   return (0, _react2.jsx)(_index.Box, {
     width: 200
-  }, (0, _react2.jsx)(_Text["default"], {
+  }, (0, _react2.jsx)(_index.Text, {
     p: "xl"
   }, "superlongtextinonelinewithnowhitespacessoitcanbelongerthatanywidth"));
 };
@@ -141,11 +462,11 @@ var TypographyStyleProps = function TypographyStyleProps() {
   return (0, _react2.jsx)(_index.Box, {
     p: "xx",
     gap: "md"
-  }, (0, _react2.jsx)(_Text["default"], {
+  }, (0, _react2.jsx)(_index.Text, {
     variant: "title"
-  }, "The Text component allows typography style props to be passed in directly."), (0, _react2.jsx)(_Text["default"], textProps, loremText), (0, _react2.jsx)(_themeUi.Divider, null), (0, _react2.jsx)(_Text["default"], {
+  }, "The Text component allows typography style props to be passed in directly."), (0, _react2.jsx)(_index.Text, textProps, loremText), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(_index.Text, {
     variant: "title"
-  }, "Typography styles can also be passed in through the sx prop for the same result."), (0, _react2.jsx)(_Text["default"], {
+  }, "Typography styles can also be passed in through the sx prop for the same result."), (0, _react2.jsx)(_index.Text, {
     sx: textProps
   }, loremText));
 };

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

@@ -1,12 +1,37 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
 exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _buttons = require("../variants/buttons");
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var accordionTitle = {
   display: 'inline-block !important',
   overflowWrap: 'break-word',
@@ -48,13 +73,9 @@ var accordionGridHeader = {
   color: 'neutral.10',
   flexGrow: 1,
   fontWeight: 700,
-  '&.is-focused': {
-    outline: 'none',
-    boxShadow: 'focus',
-    WebkitBoxShadow: 'focus',
-    MozBoxShadow: 'focus',
+  '&.is-focused': _objectSpread(_objectSpread({}, _buttons.defaultFocus), {}, {
     zIndex: '10'
-  },
+  }),
   minHeight: '64px',
   '&.is-hovered': {
     backgroundColor: 'accent.99'

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

@@ -249,6 +249,28 @@ var timeZone = {
     }
   }
 };
+
+var title = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  fontSize: 'xx',
+  fontWeight: 1,
+  color: 'text.primary',
+  fontFamily: 'standard'
+});
+
+var sectionTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  fontSize: 'lg',
+  fontWeight: 2,
+  color: 'text.primary',
+  fontFamily: 'standard'
+});
+
+var itemTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  fontSize: 'md',
+  fontWeight: 1,
+  color: 'text.primary',
+  fontFamily: 'standard'
+});
+
 var text = {
   base: base,
   bodyStrong: _objectSpread(_objectSpread({}, wordWrap), {}, {
@@ -290,17 +312,31 @@ var text = {
   }),
   environmentBreadcrumb: environmentBreadcrumb,
   fieldHelperText: fieldHelperText,
+  H1: _objectSpread(_objectSpread({}, title), {}, {
+    fontWeight: 3,
+    lineHeight: '28px'
+  }),
+  H2: _objectSpread(_objectSpread({}, sectionTitle), {}, {
+    fontWeight: 3,
+    lineHeight: '21px'
+  }),
+  H3: _objectSpread(_objectSpread({}, itemTitle), {}, {
+    fontWeight: 3,
+    lineHeight: '18px'
+  }),
+  H4: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 3,
+    color: 'text.primary',
+    fontFamily: 'standard',
+    lineHeight: '16px'
+  }),
   inputValue: {
     fontWeight: 1,
     color: 'text.primary',
     fontFamily: 'standard'
   },
-  itemTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontSize: 'md',
-    fontWeight: 1,
-    color: 'text.primary',
-    fontFamily: 'standard'
-  }),
+  itemTitle: itemTitle,
   itemSubtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'sm',
     fontWeight: 0,
@@ -340,12 +376,7 @@ var text = {
     color: 'text.secondary',
     fontFamily: 'standard'
   },
-  sectionTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontSize: 'lg',
-    fontWeight: 2,
-    color: 'text.primary',
-    fontFamily: 'standard'
-  }),
+  sectionTitle: sectionTitle,
   subtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontWeight: 0,
     color: 'text.secondary',
@@ -363,12 +394,7 @@ var text = {
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   },
-  title: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontSize: 'xx',
-    fontWeight: 1,
-    color: 'text.primary',
-    fontFamily: 'standard'
-  }),
+  title: title,
   tooltipContent: tooltipContent,
   timeZone: timeZone
 };

package/lib/components/AccordionGridItem/AccordionGridItem.js

@@ -64,9 +64,12 @@ var AccordionGridItem = function AccordionGridItem(props) {
   delete rowProps.onPointerDown;
   delete rowProps.onClick;
   return ___EmotionJSX(Box, _extends({
-    as: "div"
+    as: "div",
+    role: "row",
+    tabindex: "0"
   }, mergeProps(rowProps, others), {
     "aria-selected": isSelected,
+    "aria-expanded": isSelected,
     className: classNames,
     variant: "accordion.accordionGridItem",
     ref: rowRef

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

@@ -1,19 +1,8 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-var _excluded = ["children", "bg"];
-
-var _context;
-
 import React from 'react';
-import { Divider } from 'theme-ui';
-import Text from './Text';
-import { textVariants } from '../../utils/devUtils/constants/variants.js';
-import { flatColorList } from '../../styles/colors.js';
-import { Box } from '../../index';
+import { Box, Separator, Table, TableCell, TableBody, TableHead, TableRow, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Text',
@@ -21,72 +10,411 @@ export default {
   argTypes: {
     variant: {
       control: {
-        type: 'select',
-        options: _Object$values(textVariants)
+        type: 'none'
       },
-      description: 'Text variant.',
-      defaultValue: _Object$values(textVariants)[0]
+      description: 'Text variant.'
     },
     children: {
       control: {
-        type: 'text'
+        type: 'none'
       },
-      table: {
-        type: {
-          summary: 'string'
-        }
-      },
-      description: 'Text value.',
-      defaultValue: 'Hi, this is some text!'
+      description: 'Text value.'
     },
     color: {
       control: {
-        type: 'select',
-        options: _concatInstanceProperty(_context = [undefined]).call(_context, _mapInstanceProperty(flatColorList).call(flatColorList, function (_ref) {
-          var _ref2 = _slicedToArray(_ref, 1),
-              colorName = _ref2[0];
-
-          return colorName;
-        }))
+        type: 'none'
       },
-      table: {
-        type: {
-          summary: 'string'
-        }
-      },
-      description: 'Text color.',
-      defaultValue: undefined
+      description: 'Text color.'
     },
     bg: {
       control: {
-        type: 'select',
-        options: _mapInstanceProperty(flatColorList).call(flatColorList, function (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 1),
-              colorName = _ref4[0];
-
-          return colorName;
-        })
-      },
-      table: {
-        type: {
-          summary: 'string'
-        }
+        type: 'none'
       },
-      description: 'Background color.',
-      defaultValue: 'white'
+      description: 'Background color.'
     }
   }
 };
-export var Default = function Default(_ref5) {
-  var children = _ref5.children,
-      bg = _ref5.bg,
-      args = _objectWithoutProperties(_ref5, _excluded);
+var sx = {
+  cell: {
+    wordWrap: 'break-word',
+    wordBreak: 'break-word'
+  },
+  tableBody: {
+    borderBottom: 'unset'
+  }
+};
 
-  return ___EmotionJSX(Text, _extends({
-    bg: bg
-  }, args, {
-    p: "xl"
-  }), children);
+var TableHeading = function TableHeading(_ref) {
+  var title = _ref.title;
+  return ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "30%"
+  }, title), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "30%"
+  }, "Weight"), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "30%"
+  }, "Size"), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true
+  }, "Example")));
+};
+
+var TableData = function TableData(_ref2) {
+  var variant = _ref2.variant,
+      value = _ref2.value;
+  return ___EmotionJSX(TableRow, {
+    sx: {
+      backgroundColor: 'transparent !important',
+      alignItems: 'center'
+    }
+  }, ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    width: "30%"
+  }, ___EmotionJSX(Text, null, variant)), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    width: "30%"
+  }, ___EmotionJSX(Text, null, value.weight)), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    width: "30%"
+  }, ___EmotionJSX(Text, null, value.fontSize)), ___EmotionJSX(TableCell, {
+    sx: sx.cell
+  }, ___EmotionJSX(Text, null, value.example)));
+};
+
+export var Default = function Default() {
+  var _context, _context2, _context3, _context4, _context5, _context6;
+
+  var fontSizes = {
+    xx: '23px (xx)',
+    lg: '17px (lg)',
+    md: '15px (md)',
+    sm: '13px (sm)',
+    xs: '11px (xs)'
+  };
+  var fontWeights = {
+    '-1': '300 (-1)',
+    '0': '400 (0)',
+    '1': '500 (1)',
+    '3': '700 (3)'
+  };
+  var headingVariants = {
+    H1: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.xx,
+      example: ___EmotionJSX(Text, {
+        variant: "H1",
+        as: "H1"
+      }, '<Text variant="H1" as="H1"/>')
+    },
+    H2: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.lg,
+      example: ___EmotionJSX(Text, {
+        variant: "H2",
+        as: "H2"
+      }, '<Text variant="H2" as="H2"/>')
+    },
+    H3: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.md,
+      example: ___EmotionJSX(Text, {
+        variant: "H3",
+        as: "H3"
+      }, '<Text variant="H3" as="H3"/>')
+    },
+    H4: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.sm,
+      example: ___EmotionJSX(Text, {
+        variant: "H4",
+        as: "H4"
+      }, '<Text variant="H4" as="H4"/>')
+    }
+  };
+  var baseAndSubtitleVariants = {
+    'Base (default variant of Text)': {
+      weight: fontWeights[1],
+      fontSize: fontSizes.md,
+      color: 'text.primary',
+      example: ___EmotionJSX(Text, {
+        variant: "base"
+      }, '<Text variant="base"/>')
+    },
+    Subtitle: {
+      weight: fontWeights[0],
+      fontSize: fontSizes.sm,
+      color: 'text.secondary',
+      example: ___EmotionJSX(Text, {
+        variant: "subtitle"
+      }, '<Text variant="subtitle"/>')
+    }
+  };
+  var largeVariants = {
+    Bold: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.lg,
+      example: ___EmotionJSX(Text, {
+        fontSize: "lg",
+        fontWeight: "3"
+      }, '<Text fontSize="lg" fontWeight="3">')
+    },
+    Medium: {
+      weight: fontWeights[1],
+      fontSize: fontSizes.lg,
+      example: ___EmotionJSX(Text, {
+        fontSize: "lg",
+        fontWeight: "1"
+      }, '<Text fontSize="lg" fontWeight="1">')
+    },
+    Regular: {
+      weight: fontWeights[0],
+      fontSize: fontSizes.lg,
+      example: ___EmotionJSX(Text, {
+        fontSize: "lg",
+        fontWeight: "0"
+      }, '<Text fontSize="lg" fontWeight="0">')
+    }
+  };
+  var mediumVariants = {
+    Bold: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.md,
+      example: ___EmotionJSX(Text, {
+        fontSize: "md",
+        fontWeight: "3"
+      }, '<Text fontSize="md" fontWeight="3">')
+    },
+    Medium: {
+      weight: fontWeights[1],
+      fontSize: fontSizes.md,
+      example: ___EmotionJSX(Text, {
+        fontSize: "md",
+        fontWeight: "1"
+      }, '<Text fontSize="md" fontWeight="1">')
+    },
+    Regular: {
+      weight: fontWeights[0],
+      fontSize: fontSizes.md,
+      example: ___EmotionJSX(Text, {
+        fontSize: "md",
+        fontWeight: "0"
+      }, '<Text fontSize="md" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeights[-1],
+      fontSize: fontSizes.md,
+      example: ___EmotionJSX(Text, {
+        fontSize: "md",
+        fontWeight: "-1"
+      }, '<Text fontSize="md" fontWeight="-1">')
+    }
+  };
+  var smallVariants = {
+    Bold: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.sm,
+      example: ___EmotionJSX(Text, {
+        fontSize: "sm",
+        fontWeight: "3"
+      }, '<Text fontSize="sm" fontWeight="3">')
+    },
+    Medium: {
+      weight: fontWeights[1],
+      fontSize: fontSizes.sm,
+      example: ___EmotionJSX(Text, {
+        fontSize: "sm",
+        fontWeight: "1"
+      }, '<Text fontSize="sm" fontWeight="1">')
+    },
+    Regular: {
+      weight: fontWeights[0],
+      fontSize: fontSizes.sm,
+      example: ___EmotionJSX(Text, {
+        fontSize: "sm",
+        fontWeight: "0"
+      }, '<Text fontSize="sm" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeights[-1],
+      fontSize: fontSizes.sm,
+      example: ___EmotionJSX(Text, {
+        fontSize: "sm",
+        fontWeight: "-1"
+      }, '<Text fontSize="sm" fontWeight="-1">')
+    }
+  };
+  var xsmallVariants = {
+    Bold: {
+      weight: fontWeights[3],
+      fontSize: fontSizes.xs,
+      example: ___EmotionJSX(Text, {
+        fontSize: "xs",
+        fontWeight: "3"
+      }, '<Text fontSize="xs" fontWeight="3">')
+    },
+    Medium: {
+      weight: fontWeights[1],
+      fontSize: fontSizes.xs,
+      example: ___EmotionJSX(Text, {
+        fontSize: "xs",
+        fontWeight: "1"
+      }, '<Text fontSize="xs" fontWeight="1">')
+    },
+    Regular: {
+      weight: fontWeights[0],
+      fontSize: fontSizes.xs,
+      example: ___EmotionJSX(Text, {
+        fontSize: "xs",
+        fontWeight: "0"
+      }, '<Text fontSize="xs" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeights[-1],
+      fontSize: fontSizes.xs,
+      example: ___EmotionJSX(Text, {
+        fontSize: "xs",
+        fontWeight: "-1"
+      }, '<Text fontSize="xs" fontWeight="-1">')
+    }
+  };
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHeading, {
+    title: "Heading"
+  }), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context = _Object$entries(headingVariants)).call(_context, function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
+
+    return ___EmotionJSX(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "60%"
+  }, "Base and Subtitle"), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "20%"
+  }, "Weight"), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "30%"
+  }, "Size"), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "40%"
+  }, "Color"), ___EmotionJSX(TableCell, {
+    sx: sx.cell,
+    isHeading: true
+  }, "Example"))), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context2 = _Object$entries(baseAndSubtitleVariants)).call(_context2, function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+        key = _ref6[0],
+        value = _ref6[1];
+
+    return ___EmotionJSX(TableRow, {
+      sx: {
+        backgroundColor: 'transparent !important'
+      },
+      key: key
+    }, ___EmotionJSX(TableCell, {
+      sx: sx.cell,
+      width: "60%"
+    }, ___EmotionJSX(Text, null, key)), ___EmotionJSX(TableCell, {
+      sx: sx.cell,
+      width: "25%"
+    }, ___EmotionJSX(Text, null, value.weight)), ___EmotionJSX(TableCell, {
+      sx: sx.cell,
+      width: "35%"
+    }, ___EmotionJSX(Text, null, value.fontSize)), ___EmotionJSX(TableCell, {
+      sx: sx.cell,
+      width: "45%"
+    }, ___EmotionJSX(Text, null, value.color)), ___EmotionJSX(TableCell, {
+      sx: sx.cell
+    }, value.example));
+  }))), ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHeading, {
+    title: "Large"
+  }), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context3 = _Object$entries(largeVariants)).call(_context3, function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+        key = _ref8[0],
+        value = _ref8[1];
+
+    return ___EmotionJSX(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHeading, {
+    title: "Medium"
+  }), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context4 = _Object$entries(mediumVariants)).call(_context4, function (_ref9) {
+    var _ref10 = _slicedToArray(_ref9, 2),
+        key = _ref10[0],
+        value = _ref10[1];
+
+    return ___EmotionJSX(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHeading, {
+    title: "Small"
+  }), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context5 = _Object$entries(smallVariants)).call(_context5, function (_ref11) {
+    var _ref12 = _slicedToArray(_ref11, 2),
+        key = _ref12[0],
+        value = _ref12[1];
+
+    return ___EmotionJSX(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), ___EmotionJSX(Table, {
+    mb: "xx"
+  }, ___EmotionJSX(TableHeading, {
+    title: "XSmall"
+  }), ___EmotionJSX(TableBody, {
+    sx: sx.tableBody
+  }, _mapInstanceProperty(_context6 = _Object$entries(xsmallVariants)).call(_context6, function (_ref13) {
+    var _ref14 = _slicedToArray(_ref13, 2),
+        key = _ref14[0],
+        value = _ref14[1];
+
+    return ___EmotionJSX(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))));
 };
 export var WithCustomWidth = function WithCustomWidth() {
   return ___EmotionJSX(Box, {
@@ -111,7 +439,7 @@ export var TypographyStyleProps = function TypographyStyleProps() {
     gap: "md"
   }, ___EmotionJSX(Text, {
     variant: "title"
-  }, "The Text component allows typography style props to be passed in directly."), ___EmotionJSX(Text, textProps, loremText), ___EmotionJSX(Divider, null), ___EmotionJSX(Text, {
+  }, "The Text component allows typography style props to be passed in directly."), ___EmotionJSX(Text, textProps, loremText), ___EmotionJSX(Separator, null), ___EmotionJSX(Text, {
     variant: "title"
   }, "Typography styles can also be passed in through the sx prop for the same result."), ___EmotionJSX(Text, {
     sx: textProps

package/lib/styles/variants/accordion.js

@@ -1,3 +1,18 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { defaultFocus } from '../variants/buttons';
 var accordionTitle = {
   display: 'inline-block !important',
   overflowWrap: 'break-word',
@@ -39,13 +54,9 @@ var accordionGridHeader = {
   color: 'neutral.10',
   flexGrow: 1,
   fontWeight: 700,
-  '&.is-focused': {
-    outline: 'none',
-    boxShadow: 'focus',
-    WebkitBoxShadow: 'focus',
-    MozBoxShadow: 'focus',
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
     zIndex: '10'
-  },
+  }),
   minHeight: '64px',
   '&.is-hovered': {
     backgroundColor: 'accent.99'

package/lib/styles/variants/text.js

@@ -231,6 +231,28 @@ var timeZone = {
     }
   }
 };
+
+var title = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  fontSize: 'xx',
+  fontWeight: 1,
+  color: 'text.primary',
+  fontFamily: 'standard'
+});
+
+var sectionTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  fontSize: 'lg',
+  fontWeight: 2,
+  color: 'text.primary',
+  fontFamily: 'standard'
+});
+
+var itemTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  fontSize: 'md',
+  fontWeight: 1,
+  color: 'text.primary',
+  fontFamily: 'standard'
+});
+
 export var text = {
   base: base,
   bodyStrong: _objectSpread(_objectSpread({}, wordWrap), {}, {
@@ -272,17 +294,31 @@ export var text = {
   }),
   environmentBreadcrumb: environmentBreadcrumb,
   fieldHelperText: fieldHelperText,
+  H1: _objectSpread(_objectSpread({}, title), {}, {
+    fontWeight: 3,
+    lineHeight: '28px'
+  }),
+  H2: _objectSpread(_objectSpread({}, sectionTitle), {}, {
+    fontWeight: 3,
+    lineHeight: '21px'
+  }),
+  H3: _objectSpread(_objectSpread({}, itemTitle), {}, {
+    fontWeight: 3,
+    lineHeight: '18px'
+  }),
+  H4: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 3,
+    color: 'text.primary',
+    fontFamily: 'standard',
+    lineHeight: '16px'
+  }),
   inputValue: {
     fontWeight: 1,
     color: 'text.primary',
     fontFamily: 'standard'
   },
-  itemTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontSize: 'md',
-    fontWeight: 1,
-    color: 'text.primary',
-    fontFamily: 'standard'
-  }),
+  itemTitle: itemTitle,
   itemSubtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'sm',
     fontWeight: 0,
@@ -322,12 +358,7 @@ export var text = {
     color: 'text.secondary',
     fontFamily: 'standard'
   },
-  sectionTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontSize: 'lg',
-    fontWeight: 2,
-    color: 'text.primary',
-    fontFamily: 'standard'
-  }),
+  sectionTitle: sectionTitle,
   subtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontWeight: 0,
     color: 'text.secondary',
@@ -345,12 +376,7 @@ export var text = {
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   },
-  title: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontSize: 'xx',
-    fontWeight: 1,
-    color: 'text.primary',
-    fontFamily: 'standard'
-  }),
+  title: title,
   tooltipContent: tooltipContent,
   timeZone: timeZone
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.32.1-alpha.7",
+  "version": "1.33.0-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",