@sproutsocial/racine 18.0.0 → 19.0.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Change Log
 
+## 19.0.1
+
+### Patch Changes
+
+- 52e76ee2: Overriding the type for `React.HTMLAttributes` so that it included `data-*` attributes
+  - This fixes a bug which did not allow passing data attributes on `Input.inputProps`
+  - Also updates `React.ComponentProps` since it consumed `React.HTMLAttributes`
+- d9df9d52: Fixing a bug in CardLink component that opened two tabs when clicked
+
+## 19.0.0
+
+### Major Changes
+
+- 7c096210: 🚧 Breaking Changes 🚧
+
+  - Remove deprecated `OverflowList` component (and `react-virtualized` dependency)
+  - Remove deprecated example dataviz color rotation exports
+
+  🛠️ Non-breaking Changes 🛠️
+
+  - Add support for `react` and `react-dom` v17
+  - Upgrade dependencies
+    - `react-modal`
+    - `react-popper`
+
+### Minor Changes
+
+- 0aea6f0d: Add `fontSizes` and `lineHeights` objects to the theme. These objects fix a bug on the Card component and set us up to use the default system props behavior in future refactors.
+
+### Patch Changes
+
+- 7b871fe7: Clickable children of non-sortable `TableHeaderCell` components will now fire their onClicks properly.
+- e6cc9ab1: Remove webpack specific raw css import from the toast component.
+
 ## 18.0.0
 
 ### Major Changes

package/__flow__/index.flow.js

@@ -49,7 +49,6 @@ export { default as Menu, MenuButton, MenuButtonContext, MenuItemContainer } fro
 export { default as Message } from "./Message/index.flow";
 export { default as Modal } from "./Modal/index.flow";
 export { default as Numeral } from "./Numeral/index.flow";
-export { default as OverflowList } from "./OverflowList/index.flow";
 export { default as PartnerLogo } from "./PartnerLogo/index.flow";
 export { default as Popout } from "./Popout/index.flow";
 export { default as Radio } from "./Radio/index.flow";
@@ -104,7 +103,6 @@ export type { TypeMenuButtonContext, TypeMenuButtonProps, TypeMenuContext, TypeM
 export type { EnumDensities, TypeMessageProps } from "./Message/index.flow";
 export type { TypeModalProps, TypeModalContentProps, TypeModalFooterProps, TypeModalHeaderProps } from "./Modal/index.flow";
 export type { TypeNumeralProps } from "./Numeral/index.flow";
-export type { TypeOverflowListProps, TypeVirtualizedListProps } from "./OverflowList/index.flow";
 export type { TypePartnerLogoProps, TypePartnerNames } from "./PartnerLogo/index.flow";
 export type { EnumPlacements, TypePopoutProps } from "./Popout/index.flow";
 export type { TypeRadioProps } from "./Radio/index.flow";
@@ -136,9 +134,4 @@ export { legacyBadgeColors } from "./Badge/index.flow";
 /**
  * @deprecated Alert has been renamed to Banner
  */
-export { default as Alert } from "./Banner/index.flow";
-
-/**
- * Should this be exported? @deprecated?
- */
-export { DataVizRotation } from "./dataviz/index.flow";
+export { default as Alert } from "./Banner/index.flow";

package/commonjs/Card/subComponents.js

@@ -72,10 +72,16 @@ var CardLink = function CardLink(_ref6) {
   var _useContext = (0, _react.useContext)(_utils.SubComponentContext),
     href = _useContext.href,
     linkRef = _useContext.linkRef;
+
+  // Because we are hijacking Card click event to directly click this link, we need to stop propagation to avoid a double click event.
+  var handleClick = function handleClick(e) {
+    e.stopPropagation();
+  };
   return /*#__PURE__*/_react.default.createElement(_styles.StyledCardLink, _extends({}, rest, {
     target: external ? '_blank' : undefined,
     rel: external ? 'noreferrer' : undefined,
     href: href,
+    onClick: handleClick,
     ref: linkRef
     // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/commonjs/Collapsible/Collapsible.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useMeasure = _interopRequireDefault(require("use-measure"));
+var _useMeasure = require("../utils/use-measure");
 var _Box = _interopRequireDefault(require("../Box"));
 var _styles = require("./styles");
 var _excluded = ["children"],
@@ -86,7 +86,7 @@ var Panel = function Panel(_ref3) {
     collapsedHeight = _useContext2.collapsedHeight,
     openHeight = _useContext2.openHeight;
   var ref = (0, React.useRef)(null);
-  var measurement = (0, _useMeasure.default)(ref);
+  var measurement = (0, _useMeasure.useMeasure)(ref);
   var _useState3 = (0, React.useState)(undefined),
     _useState4 = _slicedToArray(_useState3, 2),
     isHidden = _useState4[0],

package/commonjs/TableHeaderCell/TableHeaderCell.js

@@ -54,12 +54,14 @@ var TableHeaderCell = /*#__PURE__*/function (_React$Component) {
       }));
     });
     _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
-      e.preventDefault();
       var _this$props = _this.props,
         onClick = _this$props.onClick,
         onSort = _this$props.onSort,
         isSortable = _this$props.isSortable,
         id = _this$props.id;
+      if (onClick || isSortable) {
+        e.preventDefault();
+      }
       if (onClick) {
         // @ts-note: Right now the `onClick` is incorrectly set to consume an HTMLButtonElement event
         onClick(e);

package/commonjs/Toast/styles.js

@@ -6,16 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.GlobalToastStyles = exports.CustomIcon = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _ReactToastify = _interopRequireDefault(require("!!raw-loader!react-toastify/dist/ReactToastify.css"));
+require("react-toastify/dist/ReactToastify.css");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-// TODO: this is something ugly that needs to be fixed
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-// eslint-disable-line import/no-unresolved
 
 var Container = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__Container",
@@ -38,7 +36,7 @@ var CustomIcon = (0, _styledComponents.default)(_Icon.default).withConfig({
   return p.customColor ? undefined : p.theme.colors.icon[p.type];
 });
 exports.CustomIcon = CustomIcon;
-var GlobalToastStyles = (0, _styledComponents.createGlobalStyle)(["", " .Toastify__toast{box-shadow:", ";background:transparent;}.Toastify__toast:last-of-type{margin-bottom:0;}.Toastify-container-overrides{padding:0;width:360px;}.Toastify-toast-overrides{padding:0;min-height:0;border-radius:2px;}.Toastify__toast-container--bottom-right{bottom:", ";right:", ";}@media only screen and (max-width:480px){.Toastify-container-overrides{min-width:initial;}}"], _ReactToastify.default, function (p) {
+var GlobalToastStyles = (0, _styledComponents.createGlobalStyle)([".Toastify__toast{box-shadow:", " !important;background:transparent !important;}.Toastify__toast:last-of-type{margin-bottom:0 !important;}.Toastify-container-overrides{padding:0 !important;width:360px !important;}.Toastify-toast-overrides{padding:0 !important;min-height:0 !important;border-radius:2px !important;}.Toastify__toast-container--bottom-right{bottom:", " !important;right:", " !important;}@media only screen and (max-width:480px){.Toastify-container-overrides{min-width:initial !important;}}"], function (p) {
   return p.theme.shadows.low;
 }, function (p) {
   return p.theme.space[400];

package/commonjs/index.flow.js

@@ -54,7 +54,6 @@ var _exportNames = {
   Message: true,
   Modal: true,
   Numeral: true,
-  OverflowList: true,
   PartnerLogo: true,
   Popout: true,
   Radio: true,
@@ -76,8 +75,7 @@ var _exportNames = {
   Token: true,
   TokenInput: true,
   Tooltip: true,
-  VisuallyHidden: true,
-  DataVizRotation: true
+  VisuallyHidden: true
 };
 Object.defineProperty(exports, "Alert", {
   enumerable: true,
@@ -151,12 +149,6 @@ Object.defineProperty(exports, "Collapsible", {
     return _index14.default;
   }
 });
-Object.defineProperty(exports, "DataVizRotation", {
-  enumerable: true,
-  get: function get() {
-    return _index57.DataVizRotation;
-  }
-});
 Object.defineProperty(exports, "DateRangePicker", {
   enumerable: true,
   get: function get() {
@@ -295,40 +287,34 @@ Object.defineProperty(exports, "Numeral", {
     return _index33.default;
   }
 });
-Object.defineProperty(exports, "OverflowList", {
-  enumerable: true,
-  get: function get() {
-    return _index34.default;
-  }
-});
 Object.defineProperty(exports, "PartnerLogo", {
   enumerable: true,
   get: function get() {
-    return _index35.default;
+    return _index34.default;
   }
 });
 Object.defineProperty(exports, "Popout", {
   enumerable: true,
   get: function get() {
-    return _index36.default;
+    return _index35.default;
   }
 });
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function get() {
-    return _index37.default;
+    return _index36.default;
   }
 });
 Object.defineProperty(exports, "SegmentedControl", {
   enumerable: true,
   get: function get() {
-    return _index38.default;
+    return _index37.default;
   }
 });
 Object.defineProperty(exports, "Select", {
   enumerable: true,
   get: function get() {
-    return _index39.default;
+    return _index38.default;
   }
 });
 Object.defineProperty(exports, "SingleDatePicker", {
@@ -340,61 +326,61 @@ Object.defineProperty(exports, "SingleDatePicker", {
 Object.defineProperty(exports, "Skeleton", {
   enumerable: true,
   get: function get() {
-    return _index40.default;
+    return _index39.default;
   }
 });
 Object.defineProperty(exports, "SpotIllustration", {
   enumerable: true,
   get: function get() {
-    return _index41.default;
+    return _index40.default;
   }
 });
 Object.defineProperty(exports, "Stack", {
   enumerable: true,
   get: function get() {
-    return _index42.default;
+    return _index41.default;
   }
 });
 Object.defineProperty(exports, "Table", {
   enumerable: true,
   get: function get() {
-    return _index44.default;
+    return _index43.default;
   }
 });
 Object.defineProperty(exports, "TableCell", {
   enumerable: true,
   get: function get() {
-    return _index45.default;
+    return _index44.default;
   }
 });
 Object.defineProperty(exports, "TableHeaderCell", {
   enumerable: true,
   get: function get() {
-    return _index46.default;
+    return _index45.default;
   }
 });
 Object.defineProperty(exports, "TableRowAccordion", {
   enumerable: true,
   get: function get() {
-    return _index47.default;
+    return _index46.default;
   }
 });
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
   get: function get() {
-    return _index48.default;
+    return _index47.default;
   }
 });
 Object.defineProperty(exports, "Text", {
   enumerable: true,
   get: function get() {
-    return _index49.default;
+    return _index48.default;
   }
 });
 Object.defineProperty(exports, "Textarea", {
   enumerable: true,
   get: function get() {
-    return _index50.default;
+    return _index49.default;
   }
 });
 Object.defineProperty(exports, "ThemeProvider", {
@@ -406,37 +392,37 @@ Object.defineProperty(exports, "ThemeProvider", {
 Object.defineProperty(exports, "ToastContainer", {
   enumerable: true,
   get: function get() {
-    return _index51.default;
+    return _index50.default;
   }
 });
 Object.defineProperty(exports, "ToggleHint", {
   enumerable: true,
   get: function get() {
-    return _index52.default;
+    return _index51.default;
   }
 });
 Object.defineProperty(exports, "Token", {
   enumerable: true,
   get: function get() {
-    return _index53.default;
+    return _index52.default;
   }
 });
 Object.defineProperty(exports, "TokenInput", {
   enumerable: true,
   get: function get() {
-    return _index54.default;
+    return _index53.default;
   }
 });
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function get() {
-    return _index55.default;
+    return _index54.default;
   }
 });
 Object.defineProperty(exports, "VisuallyHidden", {
   enumerable: true,
   get: function get() {
-    return _index56.VisuallyHidden;
+    return _index55.VisuallyHidden;
   }
 });
 Object.defineProperty(exports, "darkTheme", {
@@ -484,7 +470,7 @@ Object.defineProperty(exports, "theme", {
 Object.defineProperty(exports, "toast", {
   enumerable: true,
   get: function get() {
-    return _index51.toast;
+    return _index50.toast;
   }
 });
 Object.defineProperty(exports, "useInteractiveColor", {
@@ -566,41 +552,39 @@ var _index30 = _interopRequireWildcard(require("./Menu/index.flow"));
 var _index31 = _interopRequireDefault(require("./Message/index.flow"));
 var _index32 = _interopRequireDefault(require("./Modal/index.flow"));
 var _index33 = _interopRequireDefault(require("./Numeral/index.flow"));
-var _index34 = _interopRequireDefault(require("./OverflowList/index.flow"));
-var _index35 = _interopRequireDefault(require("./PartnerLogo/index.flow"));
-var _index36 = _interopRequireDefault(require("./Popout/index.flow"));
-var _index37 = _interopRequireDefault(require("./Radio/index.flow"));
-var _index38 = _interopRequireDefault(require("./SegmentedControl/index.flow"));
-var _index39 = _interopRequireDefault(require("./Select/index.flow"));
-var _index40 = _interopRequireDefault(require("./Skeleton/index.flow"));
-var _index41 = _interopRequireDefault(require("./SpotIllustration/index.flow"));
-var _index42 = _interopRequireDefault(require("./Stack/index.flow"));
-var _index43 = require("./Switch/index.flow");
-Object.keys(_index43).forEach(function (key) {
+var _index34 = _interopRequireDefault(require("./PartnerLogo/index.flow"));
+var _index35 = _interopRequireDefault(require("./Popout/index.flow"));
+var _index36 = _interopRequireDefault(require("./Radio/index.flow"));
+var _index37 = _interopRequireDefault(require("./SegmentedControl/index.flow"));
+var _index38 = _interopRequireDefault(require("./Select/index.flow"));
+var _index39 = _interopRequireDefault(require("./Skeleton/index.flow"));
+var _index40 = _interopRequireDefault(require("./SpotIllustration/index.flow"));
+var _index41 = _interopRequireDefault(require("./Stack/index.flow"));
+var _index42 = require("./Switch/index.flow");
+Object.keys(_index42).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _index43[key]) return;
+  if (key in exports && exports[key] === _index42[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _index43[key];
+      return _index42[key];
     }
   });
 });
-var _index44 = _interopRequireDefault(require("./Table/index.flow"));
-var _index45 = _interopRequireDefault(require("./TableCell/index.flow"));
-var _index46 = _interopRequireDefault(require("./TableHeaderCell/index.flow"));
-var _index47 = _interopRequireDefault(require("./TableRowAccordion/index.flow"));
-var _index48 = _interopRequireDefault(require("./Tabs/index.flow"));
-var _index49 = _interopRequireDefault(require("./Text/index.flow"));
-var _index50 = _interopRequireDefault(require("./Textarea/index.flow"));
-var _index51 = _interopRequireWildcard(require("./Toast/index.flow"));
-var _index52 = _interopRequireDefault(require("./ToggleHint/index.flow"));
-var _index53 = _interopRequireDefault(require("./Token/index.flow"));
-var _index54 = _interopRequireDefault(require("./TokenInput/index.flow"));
-var _index55 = _interopRequireDefault(require("./Tooltip/index.flow"));
-var _index56 = require("./VisuallyHidden/index.flow");
-var _index57 = require("./dataviz/index.flow");
+var _index43 = _interopRequireDefault(require("./Table/index.flow"));
+var _index44 = _interopRequireDefault(require("./TableCell/index.flow"));
+var _index45 = _interopRequireDefault(require("./TableHeaderCell/index.flow"));
+var _index46 = _interopRequireDefault(require("./TableRowAccordion/index.flow"));
+var _index47 = _interopRequireDefault(require("./Tabs/index.flow"));
+var _index48 = _interopRequireDefault(require("./Text/index.flow"));
+var _index49 = _interopRequireDefault(require("./Textarea/index.flow"));
+var _index50 = _interopRequireWildcard(require("./Toast/index.flow"));
+var _index51 = _interopRequireDefault(require("./ToggleHint/index.flow"));
+var _index52 = _interopRequireDefault(require("./Token/index.flow"));
+var _index53 = _interopRequireDefault(require("./TokenInput/index.flow"));
+var _index54 = _interopRequireDefault(require("./Tooltip/index.flow"));
+var _index55 = require("./VisuallyHidden/index.flow");
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/commonjs/index.js

@@ -19,6 +19,7 @@ var _exportNames = {
   focusRing: true,
   disabled: true,
   useInteractiveColor: true,
+  useMeasure: true,
   Alert: true
 };
 Object.defineProperty(exports, "Alert", {
@@ -93,6 +94,12 @@ Object.defineProperty(exports, "useInteractiveColor", {
     return _useInteractiveColor.useInteractiveColor;
   }
 });
+Object.defineProperty(exports, "useMeasure", {
+  enumerable: true,
+  get: function get() {
+    return _useMeasure.useMeasure;
+  }
+});
 Object.defineProperty(exports, "useMultiselect", {
   enumerable: true,
   get: function get() {
@@ -139,6 +146,7 @@ var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 var _hooks = require("./utils/hooks");
 var _mixins = require("./utils/mixins");
 var _useInteractiveColor = require("./utils/useInteractiveColor");
+var _useMeasure = require("./utils/use-measure");
 var _Avatar = require("./Avatar");
 Object.keys(_Avatar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -499,18 +507,6 @@ Object.keys(_Numeral).forEach(function (key) {
     }
   });
 });
-var _OverflowList = require("./OverflowList");
-Object.keys(_OverflowList).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _OverflowList[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _OverflowList[key];
-    }
-  });
-});
 var _PartnerLogo = require("./PartnerLogo");
 Object.keys(_PartnerLogo).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -775,16 +771,4 @@ Object.keys(_VisuallyHidden).forEach(function (key) {
     }
   });
 });
-var _dataviz = require("./dataviz");
-Object.keys(_dataviz).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _dataviz[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _dataviz[key];
-    }
-  });
-});
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/commonjs/react.d.js

@@ -0,0 +1 @@
+"use strict";

package/commonjs/themes/light/theme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.typography = exports.space = exports.shadows = exports.radii = exports.fontWeights = exports.fontFamily = exports.easing = exports.duration = exports.default = exports.breakpoints = exports.borders = exports.borderWidths = void 0;
+exports.typography = exports.space = exports.shadows = exports.radii = exports.lineHeights = exports.fontWeights = exports.fontSizes = exports.fontFamily = exports.easing = exports.duration = exports.default = exports.breakpoints = exports.borders = exports.borderWidths = void 0;
 var _polished = require("polished");
 var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
 var _seedsNetworkcolor = _interopRequireDefault(require("@sproutsocial/seeds-networkcolor"));
@@ -292,6 +292,36 @@ var typography = {
   1200: TYPOGRAPHY.TYPOGRAPHY_SIZE_1200
 };
 exports.typography = typography;
+var fontSizes = {
+  100: TYPOGRAPHY.TYPOGRAPHY_SIZE_100.fontSize,
+  200: TYPOGRAPHY.TYPOGRAPHY_SIZE_200.fontSize,
+  300: TYPOGRAPHY.TYPOGRAPHY_SIZE_300.fontSize,
+  400: TYPOGRAPHY.TYPOGRAPHY_SIZE_400.fontSize,
+  500: TYPOGRAPHY.TYPOGRAPHY_SIZE_500.fontSize,
+  600: TYPOGRAPHY.TYPOGRAPHY_SIZE_600.fontSize,
+  700: TYPOGRAPHY.TYPOGRAPHY_SIZE_700.fontSize,
+  800: TYPOGRAPHY.TYPOGRAPHY_SIZE_800.fontSize,
+  900: TYPOGRAPHY.TYPOGRAPHY_SIZE_900.fontSize,
+  1000: TYPOGRAPHY.TYPOGRAPHY_SIZE_1000.fontSize,
+  1100: TYPOGRAPHY.TYPOGRAPHY_SIZE_1100.fontSize,
+  1200: TYPOGRAPHY.TYPOGRAPHY_SIZE_1200.fontSize
+};
+exports.fontSizes = fontSizes;
+var lineHeights = {
+  100: TYPOGRAPHY.TYPOGRAPHY_SIZE_100.lineHeight,
+  200: TYPOGRAPHY.TYPOGRAPHY_SIZE_200.lineHeight,
+  300: TYPOGRAPHY.TYPOGRAPHY_SIZE_300.lineHeight,
+  400: TYPOGRAPHY.TYPOGRAPHY_SIZE_400.lineHeight,
+  500: TYPOGRAPHY.TYPOGRAPHY_SIZE_500.lineHeight,
+  600: TYPOGRAPHY.TYPOGRAPHY_SIZE_600.lineHeight,
+  700: TYPOGRAPHY.TYPOGRAPHY_SIZE_700.lineHeight,
+  800: TYPOGRAPHY.TYPOGRAPHY_SIZE_800.lineHeight,
+  900: TYPOGRAPHY.TYPOGRAPHY_SIZE_900.lineHeight,
+  1000: TYPOGRAPHY.TYPOGRAPHY_SIZE_1000.lineHeight,
+  1100: TYPOGRAPHY.TYPOGRAPHY_SIZE_1100.lineHeight,
+  1200: TYPOGRAPHY.TYPOGRAPHY_SIZE_1200.lineHeight
+};
+exports.lineHeights = lineHeights;
 var fontFamily = TYPOGRAPHY.TYPOGRAPHY_FAMILY;
 exports.fontFamily = fontFamily;
 var fontWeights = {
@@ -355,6 +385,8 @@ var theme = {
   typography: _objectSpread(_objectSpread({}, typography), {}, {
     typography: typography
   }),
+  fontSizes: fontSizes,
+  lineHeights: lineHeights,
   fontFamily: fontFamily,
   fontWeights: fontWeights,
   space: _objectSpread(_objectSpread({}, space), {}, {

package/commonjs/utils/use-measure.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMeasure = useMeasure;
+var _react = require("react");
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var initialBounds = Object.freeze({
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+});
+function useMeasure(ref) {
+  var _useState = (0, _react.useState)(initialBounds),
+    _useState2 = _slicedToArray(_useState, 2),
+    bounds = _useState2[0],
+    setContentRect = _useState2[1];
+  (0, _react.useLayoutEffect)(function () {
+    var element = ref.current;
+    if (!element ||
+    // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined
+    !('ResizeObserver' in window)) {
+      return;
+    }
+    var resizeObserver = new ResizeObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+        entry = _ref2[0];
+      var _entry$contentRect = entry.contentRect,
+        x = _entry$contentRect.x,
+        y = _entry$contentRect.y,
+        width = _entry$contentRect.width,
+        height = _entry$contentRect.height,
+        top = _entry$contentRect.top,
+        right = _entry$contentRect.right,
+        bottom = _entry$contentRect.bottom,
+        left = _entry$contentRect.left;
+      setContentRect({
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        top: top,
+        right: right,
+        bottom: bottom,
+        left: left
+      });
+    });
+    resizeObserver.observe(ref.current);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [ref]);
+  return bounds;
+}

package/dist/themes/dark/theme.scss

@@ -544,6 +544,34 @@ $theme: (
         )
       )
     ),
+    "fontSizes": (
+      "100": 11px,
+      "200": 13px,
+      "300": 16px,
+      "400": 18px,
+      "500": 21px,
+      "600": 24px,
+      "700": 32px,
+      "800": 43px,
+      "900": 57px,
+      "1000": 76px,
+      "1100": 101px,
+      "1200": 135px
+    ),
+    "lineHeights": (
+      "100": 18.666666666666668px,
+      "200": 21.333333333333332px,
+      "300": 24px,
+      "400": 26.666666666666668px,
+      "500": 29.333333333333332px,
+      "600": 32px,
+      "700": 40px,
+      "800": 50.666666666666664px,
+      "900": 64px,
+      "1000": 80px,
+      "1100": 101.33333333333333px,
+      "1200": 125.33333333333333px
+    ),
     "fontFamily": "system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif",
     "fontWeights": (
       "normal": 400,