@splunk/react-ui 4.16.3 → 4.17.0

package/FormRows.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 176);
+/******/ 	return __webpack_require__(__webpack_require__.s = 179);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,28 +101,42 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 107:
+/***/ 106:
 /***/ (function(module, exports) {
 
 module.exports = require("react-sortable-hoc");
 
 /***/ }),
 
-/***/ 130:
+/***/ 132:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Plus");
 
 /***/ }),
 
-/***/ 16:
+/***/ 133:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/enterprise/Plus");
+
+/***/ }),
+
+/***/ 14:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ScreenReaderContent");
 
 /***/ }),
 
-/***/ 176:
+/***/ 17:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Button");
+
+/***/ }),
+
+/***/ 179:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -145,68 +159,62 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var i18n_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
-var keyboard_ = __webpack_require__(9);
-
-// EXTERNAL MODULE: external "@splunk/react-icons/Plus"
-var Plus_ = __webpack_require__(130);
-var Plus_default = /*#__PURE__*/__webpack_require__.n(Plus_);
+var keyboard_ = __webpack_require__(7);
 
-// EXTERNAL MODULE: ./src/icons/ThemedIcon.tsx
-var ThemedIcon = __webpack_require__(7);
+// CONCATENATED MODULE: ./src/FormRows/FormRowsContext.tsx
 
-// EXTERNAL MODULE: ./src/icons/SVG.tsx
-var SVG = __webpack_require__(6);
+var FormRowsContext = /*#__PURE__*/Object(external_react_["createContext"])({
+  disabledDeleteButton: false,
+  sortable: true
+});
+FormRowsContext.displayName = 'FormRows';
+/* harmony default export */ var FormRows_FormRowsContext = (FormRowsContext);
+// EXTERNAL MODULE: external "@splunk/themes"
+var themes_ = __webpack_require__(0);
 
-// CONCATENATED MODULE: ./src/icons/Plus.tsx
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+// EXTERNAL MODULE: external "@splunk/react-icons/Plus"
+var Plus_ = __webpack_require__(132);
+var Plus_default = /*#__PURE__*/__webpack_require__.n(Plus_);
 
+// EXTERNAL MODULE: external "@splunk/react-icons/enterprise/Plus"
+var enterprise_Plus_ = __webpack_require__(133);
+var enterprise_Plus_default = /*#__PURE__*/__webpack_require__.n(enterprise_Plus_);
 
+// CONCATENATED MODULE: ./src/FormRows/icons/FormRowsPlusIcon.tsx
 
 
 
 
-function Prisma24(_ref) {
-  var otherProps = _extends({}, _ref);
 
-  return /*#__PURE__*/external_react_default.a.createElement(SVG["a" /* default */], _extends({
-    viewBox: "0 0 24 24"
-  }, otherProps), /*#__PURE__*/external_react_default.a.createElement("path", {
-    d: "M13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5Z",
-    fill: "currentColor"
-  }));
-}
+var FormRowsPlusIcon_FormRowsPlusIcon = function FormRowsPlusIcon() {
+  var _useSplunkTheme = Object(themes_["useSplunkTheme"])(),
+      isEnterprise = _useSplunkTheme.isEnterprise,
+      isCompact = _useSplunkTheme.isCompact;
 
-function Prisma16(_ref2) {
-  var otherProps = _extends({}, _ref2);
+  var prismaSize = isCompact ? '20px' : '24px';
+  return isEnterprise ? /*#__PURE__*/external_react_default.a.createElement(enterprise_Plus_default.a, {
+    screenReaderText: null,
+    hideDefaultTooltip: true
+  }) : /*#__PURE__*/external_react_default.a.createElement(Plus_default.a, {
+    width: prismaSize,
+    height: prismaSize
+  });
+};
 
-  return /*#__PURE__*/external_react_default.a.createElement(SVG["a" /* default */], _extends({
-    viewBox: "0 0 16 16"
-  }, otherProps), /*#__PURE__*/external_react_default.a.createElement("path", {
-    d: "M7 9V14H9V9H14V7H9V2H7V7H2V9H7Z",
-    fill: "currentColor"
-  }));
-}
-
-function Plus(props) {
-  return /*#__PURE__*/external_react_default.a.createElement(ThemedIcon["a" /* default */], _extends({
-    Enterprise: Plus_default.a,
-    Prisma16: Prisma16,
-    Prisma24: Prisma24
-  }, props));
-}
+/* harmony default export */ var icons_FormRowsPlusIcon = (FormRowsPlusIcon_FormRowsPlusIcon);
 // EXTERNAL MODULE: external "react-sortable-hoc"
-var external_react_sortable_hoc_ = __webpack_require__(107);
+var external_react_sortable_hoc_ = __webpack_require__(106);
 
 // EXTERNAL MODULE: external "lodash/omit"
 var omit_ = __webpack_require__(5);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/CloseButton"
-var CloseButton_ = __webpack_require__(92);
+var CloseButton_ = __webpack_require__(90);
 var CloseButton_default = /*#__PURE__*/__webpack_require__.n(CloseButton_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(16);
+var ScreenReaderContent_ = __webpack_require__(14);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -214,16 +222,13 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Box"
-var Box_ = __webpack_require__(8);
+var Box_ = __webpack_require__(6);
 var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Button"
-var Button_ = __webpack_require__(19);
+var Button_ = __webpack_require__(17);
 var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
 
-// EXTERNAL MODULE: external "@splunk/themes"
-var themes_ = __webpack_require__(0);
-
 // CONCATENATED MODULE: ./src/FormRows/FormRowsStyles.ts
 
 
@@ -306,18 +311,10 @@ var StyledDrag = external_styled_components_default.a.div.withConfig({
   prisma: Object(external_styled_components_["css"])(["height:20px;"])
 }));
 
-// CONCATENATED MODULE: ./src/FormRows/FormRowsContext.tsx
-
-var FormRowsContext = /*#__PURE__*/Object(external_react_["createContext"])({
-  disabledDeleteButton: false,
-  sortable: true
-});
-FormRowsContext.displayName = 'FormRows';
-/* harmony default export */ var FormRows_FormRowsContext = (FormRowsContext);
 // CONCATENATED MODULE: ./src/FormRows/Row.tsx
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function Row_extends() { Row_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return Row_extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -422,7 +419,7 @@ var Row_Row = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, Object(i18n_["_"])('Press arrow up or arrow down to re-order items')));
       });
       return /*#__PURE__*/external_react_default.a.createElement(Styled // eslint-disable-line jsx-a11y/no-static-element-interactions
-      , Row_extends({
+      , _extends({
         $sortable: sortableContext,
         "data-test": "row",
         ref: elementRef,
@@ -497,8 +494,6 @@ function FormRows_defineProperty(obj, key, value) { if (key in obj) { Object.def
 
 
 
-/** @public */
-
 var FormRows_propTypes = {
   addLabel: external_prop_types_default.a.string,
   children: external_prop_types_default.a.node,
@@ -615,7 +610,7 @@ var FormRows_FormRows = /*#__PURE__*/function (_Component) {
         disabled: disabled,
         appearance: "pill",
         "data-test": "add-row",
-        icon: /*#__PURE__*/external_react_default.a.createElement(Plus, null),
+        icon: /*#__PURE__*/external_react_default.a.createElement(icons_FormRowsPlusIcon, null),
         label: addLabel,
         onClick: onRequestAdd,
         $sortable: sortable
@@ -725,13 +720,6 @@ FormRows_defineProperty(FormRows_FormRows, "Row", FormRows_Row);
 
 
 
-/***/ }),
-
-/***/ 19:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Button");
-
 /***/ }),
 
 /***/ 2:
@@ -763,163 +751,20 @@ module.exports = require("lodash/omit");
 /***/ }),
 
 /***/ 6:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SVG; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-
-
-var Styled = styled_components__WEBPACK_IMPORTED_MODULE_1___default.a.svg.withConfig({
-  displayName: "SVG__Styled",
-  componentId: "sc-1bz0ryh-0"
-})(["flex:0 0 auto;"]);
-function SVG(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Styled, _extends({
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props));
-}
-
-/***/ }),
-
-/***/ 7:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Icon; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _splunk_themes__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(0);
-/* harmony import */ var _splunk_themes__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_splunk_themes__WEBPACK_IMPORTED_MODULE_2__);
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-
-
-
-var inlineStyles = {
-  display: 'inline-block',
-  flex: '0 0 auto',
-  overflow: 'visible',
-  verticalAlign: 'middle'
-};
-var blockStyles = {
-  display: 'block',
-  flex: '0 0 auto',
-  margin: '0 auto',
-  overflow: 'visible'
-};
-var propTypes = {
-  Enterprise: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,
-  enterpriseSize: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number, prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string]),
-  enterpriseWidth: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number, prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string]),
-  enterpriseHeight: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number, prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string]),
-  Prisma24: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func.isRequired,
-  Prisma20: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,
-  Prisma16: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,
-  prismaSize: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.oneOf(['medium', 'small']),
-  inline: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,
-  screenReaderText: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string
-};
-var defaultProps = {
-  inline: true,
-  prismaSize: 'medium'
-};
-function Icon(_ref) {
-  var Enterprise = _ref.Enterprise,
-      Prisma24 = _ref.Prisma24,
-      Prisma20 = _ref.Prisma20,
-      Prisma16 = _ref.Prisma16,
-      prismaSize = _ref.prismaSize,
-      inline = _ref.inline,
-      enterpriseSize = _ref.enterpriseSize,
-      enterpriseWidth = _ref.enterpriseWidth,
-      enterpriseHeight = _ref.enterpriseHeight,
-      screenReaderText = _ref.screenReaderText,
-      otherProps = _objectWithoutProperties(_ref, ["Enterprise", "Prisma24", "Prisma20", "Prisma16", "prismaSize", "inline", "enterpriseSize", "enterpriseWidth", "enterpriseHeight", "screenReaderText"]);
-
-  var _useSplunkTheme = Object(_splunk_themes__WEBPACK_IMPORTED_MODULE_2__["useSplunkTheme"])(),
-      family = _useSplunkTheme.family,
-      density = _useSplunkTheme.density; // Enterprise - all variants
-
-
-  if (family === 'enterprise') {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Enterprise, _extends({
-      size: enterpriseSize,
-      width: enterpriseWidth,
-      height: enterpriseHeight,
-      screenReaderText: screenReaderText || null,
-      hideDefaultTooltip: true,
-      inline: inline
-    }, otherProps));
-  }
-
-  var prismaProps = _objectSpread({
-    'aria-label': screenReaderText,
-    style: inline ? inlineStyles : blockStyles
-  }, otherProps); // Prisma - small+compact, small+comfortable
-
-
-  if (prismaSize === 'small') {
-    var SVG = Prisma16 || Prisma24;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(SVG, _extends({
-      width: "16",
-      height: "16"
-    }, prismaProps));
-  } // Prisma - medium+compact
-
-
-  if (density === 'compact') {
-    var _SVG = Prisma20 || Prisma24;
-
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG, _extends({
-      width: "20",
-      height: "20"
-    }, prismaProps));
-  } // Prisma - medium+comfortable
-
-
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Prisma24, _extends({
-    width: "24",
-    height: "24"
-  }, prismaProps));
-}
-Icon.propTypes = propTypes;
-Icon.defaultProps = defaultProps;
-
-/***/ }),
-
-/***/ 8:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 9:
+/***/ 7:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/keyboard");
 
 /***/ }),
 
-/***/ 92:
+/***/ 90:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/CloseButton");

package/Heading.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 212);
+/******/ 	return __webpack_require__(__webpack_require__.s = 219);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,6 +101,13 @@ module.exports = require("prop-types");
 
 /***/ }),
 
+/***/ 134:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Typography");
+
+/***/ }),
+
 /***/ 2:
 /***/ (function(module, exports) {
 
@@ -108,7 +115,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 212:
+/***/ 219:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -133,35 +140,31 @@ var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(exte
 // EXTERNAL MODULE: external "@splunk/themes"
 var themes_ = __webpack_require__(0);
 
+// EXTERNAL MODULE: external "@splunk/react-ui/Typography"
+var Typography_ = __webpack_require__(134);
+var Typography_default = /*#__PURE__*/__webpack_require__.n(Typography_);
+
 // CONCATENATED MODULE: ./src/Heading/HeadingStyles.ts
 
 
-var StyledH1 = external_styled_components_default.a.h1.withConfig({
-  displayName: "HeadingStyles__StyledH1",
+
+var StyledTypography = external_styled_components_default()(Typography_default.a).withConfig({
+  displayName: "HeadingStyles__StyledTypography",
   componentId: "sc-15s3yx3-0"
-})(["", ";", " margin:1.414em 0 0.4em;text-rendering:optimizelegibility;", " ", ""], themes_["mixins"].reset('block'), Object(themes_["pickVariant"])('as', {
-  h1: function h1() {
-    return themes_["mixins"].typography('title1');
-  },
-  h2: function h2() {
-    return themes_["mixins"].typography('title2');
-  },
-  h3: function h3() {
-    return themes_["mixins"].typography('title3');
-  },
-  h4: {
+})(["", " margin:1.414em 0 0.4em;text-rendering:optimizelegibility;", " ", ""], Object(themes_["pickVariant"])('variant', {
+  title4: {
     enterprise: {
       compact: function compact(_ref) {
         var $isSection = _ref.$isSection;
         return $isSection ? themes_["mixins"].typography('title4', {
-          weight: 500
+          weight: 'semiBold'
         }) : themes_["mixins"].typography('title4');
       },
       comfortable: function comfortable(_ref2) {
         var $isSection = _ref2.$isSection;
         return $isSection ? themes_["mixins"].typography('title4', {
           size: 14,
-          weight: 500
+          weight: 'semiBold'
         }) : themes_["mixins"].typography('title4', {
           size: 14
         });
@@ -174,9 +177,6 @@ var StyledH1 = external_styled_components_default.a.h1.withConfig({
         size: 14
       }) : themes_["mixins"].typography('title4');
     }
-  },
-  h5: function h5() {
-    return themes_["mixins"].typography('title5');
   }
 }), Object(themes_["pickVariant"])('$isSection', {
   "true": {
@@ -203,7 +203,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var propTypes = {
   children: external_prop_types_default.a.node,
   elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
-  level: external_prop_types_default.a.oneOf([1, 2, 3, 4, 's', 'ss'])
+  level: external_prop_types_default.a.oneOf([1, 2, 3, 4, 's', 'ss', 5, 6])
 };
 // h1-h6 use the same intrinsic element type
 var levelToElement = {
@@ -212,26 +212,38 @@ var levelToElement = {
   '3': 'h3',
   '4': 'h4',
   s: 'h4',
-  ss: 'h5'
+  ss: 'h5',
+  '5': 'h5',
+  '6': 'h6'
+};
+var elementToVariant = {
+  h1: 'title1',
+  h2: 'title2',
+  h3: 'title3',
+  h4: 'title4',
+  h5: 'title5',
+  h6: 'title6'
 };
 
 function Heading(_ref) {
   var _ref$level = _ref.level,
       level = _ref$level === void 0 ? 2 : _ref$level,
       children = _ref.children,
-      elementRef = _ref.elementRef,
-      otherProps = _objectWithoutProperties(_ref, ["level", "children", "elementRef"]);
+      variant = _ref.variant,
+      otherProps = _objectWithoutProperties(_ref, ["level", "children", "variant"]);
 
   // @docs-props-type HeadingPropsBase
   var isSection = function isSection(l) {
     return l.toString().charAt(0) === 's';
   };
 
-  return /*#__PURE__*/external_react_default.a.createElement(StyledH1, _extends({
-    as: levelToElement[level],
+  var element = levelToElement[level];
+  var finalVariant = variant || elementToVariant[element];
+  return /*#__PURE__*/external_react_default.a.createElement(StyledTypography, _extends({
+    forwardedAs: element,
     $isSection: isSection(level),
     "data-test": "heading",
-    ref: elementRef
+    variant: finalVariant
   }, otherProps), children);
 }