@pingux/astro 1.32.1 → 1.33.0-alpha.1

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/PasswordField/PasswordField.js

@@ -118,7 +118,7 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return inputRef.current;
   });
 
-  var _hooks$useProgressive = hooks.useProgressiveState(isVisibleProp, onVisibleChangeProp),
+  var _hooks$useProgressive = hooks.useProgressiveState(isVisibleProp, isVisibleProp),
       _hooks$useProgressive2 = (0, _slicedToArray2["default"])(_hooks$useProgressive, 2),
       isVisible = _hooks$useProgressive2[0],
       setIsShown = _hooks$useProgressive2[1]; // Measure the width of the input to inform the width of the menu (below).

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