@khanacademy/wonder-blocks-typography 3.1.3 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-typography
 
+## 3.2.0
+
+### Minor Changes
+
+- b9e4946: Update Typography components to use font tokens with REM units instead of pixels for user-scalable font-sizing and line-heights.
+
+### Patch Changes
+
+- Updated dependencies [b9e4946]
+    - @khanacademy/wonder-blocks-tokens@10.0.0
+    - @khanacademy/wonder-blocks-core@12.2.1
+
 ## 3.1.3
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,377 +1,41 @@
-import _extends from '@babel/runtime/helpers/extends';
 import { StyleSheet } from 'aphrodite';
-import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
+import { font, breakpoint } from '@khanacademy/wonder-blocks-tokens';
+import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Text } from '@khanacademy/wonder-blocks-core';
 
-const Regular = 400;
-const Bold = 700;
-const Black = 900;
-const mobile = "@media (max-width: 1023px)";
-const desktop = "@media (min-width: 1024px)";
-const common = {
-  display: "block"
-};
-const SansFamily = 'Lato, "Noto Sans", sans-serif';
-const SerifFamily = '"Noto Serif", serif';
-const InconsolataFamily = "Inconsolata, monospace";
-const styles = StyleSheet.create({
-  Title: _extends({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Black,
-    [desktop]: {
-      fontSize: 36,
-      lineHeight: "40px"
-    },
-    [mobile]: {
-      fontSize: 28,
-      lineHeight: "32px"
-    }
-  }),
-  Tagline: _extends({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Regular,
-    fontSize: 20,
-    lineHeight: "24px"
-  }),
-  HeadingLarge: _extends({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Bold,
-    [desktop]: {
-      fontSize: 28,
-      lineHeight: "32px"
-    },
-    [mobile]: {
-      fontSize: 24,
-      lineHeight: "28px"
-    }
-  }),
-  HeadingMedium: _extends({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Bold,
-    [desktop]: {
-      fontSize: 24,
-      lineHeight: "28px"
-    },
-    [mobile]: {
-      fontSize: 22,
-      lineHeight: "26px"
-    }
-  }),
-  HeadingSmall: _extends({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Bold,
-    fontSize: 20,
-    lineHeight: "24px"
-  }),
-  HeadingXSmall: _extends({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Bold,
-    fontSize: 12,
-    lineHeight: "16px",
-    letterSpacing: 0.6,
-    textTransform: "uppercase"
-  }),
-  BodySerifBlock: _extends({}, common, {
-    fontFamily: SerifFamily,
-    fontWeight: Regular,
-    fontSize: 22,
-    lineHeight: "28px"
-  }),
-  BodySerif: _extends({}, common, {
-    fontFamily: SerifFamily,
-    fontWeight: Regular,
-    fontSize: 18,
-    lineHeight: "22px"
-  }),
-  BodyMonospace: _extends({}, common, {
-    fontFamily: InconsolataFamily,
-    fontWeight: Regular,
-    fontSize: 17,
-    lineHeight: "22px"
-  }),
-  Body: _extends({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Regular,
-    fontSize: 16,
-    lineHeight: "22px"
-  }),
-  LabelLarge: _extends({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Bold,
-    fontSize: 16,
-    lineHeight: "20px"
-  }),
-  LabelMedium: _extends({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Regular,
-    fontSize: 16,
-    lineHeight: "20px"
-  }),
-  LabelSmall: _extends({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Regular,
-    fontSize: 14,
-    lineHeight: "18px"
-  }),
-  LabelXSmall: _extends({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Regular,
-    fontSize: 12,
-    lineHeight: "16px"
-  }),
-  Caption: _extends({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Regular,
-    fontSize: 14,
-    lineHeight: "20px"
-  }),
-  Footnote: _extends({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Regular,
-    fontSize: 12,
-    lineHeight: "18px"
-  })
-});
+const common={display:"block"};const styles=StyleSheet.create({Title:{...common,fontFamily:font.family.sans,fontWeight:font.weight.black,[breakpoint.mediaQuery.xl]:{fontSize:font.size.xxxLarge,lineHeight:font.lineHeight.xxxLarge},[breakpoint.mediaQuery.mdOrSmaller]:{fontSize:font.size.xxLarge,lineHeight:font.lineHeight.xxLarge}},Tagline:{...common,fontFamily:font.family.sans,fontWeight:font.weight.regular,fontSize:font.size.large,lineHeight:font.lineHeight.large},HeadingLarge:{...common,fontFamily:font.family.sans,fontWeight:font.weight.bold,[breakpoint.mediaQuery.xl]:{fontSize:font.size.xxLarge,lineHeight:font.lineHeight.xxLarge},[breakpoint.mediaQuery.mdOrSmaller]:{fontSize:font.size.xLarge,lineHeight:font.lineHeight.xLarge}},HeadingMedium:{...common,fontFamily:font.family.sans,fontWeight:font.weight.bold,[breakpoint.mediaQuery.xl]:{fontSize:font.size.xLarge,lineHeight:font.lineHeight.xLarge},[breakpoint.mediaQuery.mdOrSmaller]:{fontSize:"2.2rem",lineHeight:"2.6rem"}},HeadingSmall:{...common,fontFamily:font.family.sans,fontWeight:font.weight.bold,fontSize:font.size.large,lineHeight:font.lineHeight.large},HeadingXSmall:{...common,fontFamily:font.family.sans,fontWeight:font.weight.bold,fontSize:font.size.xSmall,lineHeight:font.lineHeight.xSmall,letterSpacing:.6,textTransform:"uppercase"},BodySerifBlock:{...common,fontFamily:font.family.serif,fontWeight:font.weight.regular,fontSize:font.size.large,lineHeight:font.lineHeight.large},BodySerif:{...common,fontFamily:font.family.serif,fontWeight:font.weight.regular,fontSize:font.size.medium,lineHeight:font.size.medium},BodyMonospace:{...common,fontFamily:font.family.mono,fontWeight:font.weight.regular,fontSize:font.size.medium,lineHeight:font.lineHeight.medium},Body:{...common,fontFamily:font.family.sans,fontWeight:font.weight.regular,fontSize:font.size.medium,lineHeight:font.lineHeight.xMedium},LabelLarge:{...common,fontFamily:font.family.sans,fontWeight:font.weight.bold,fontSize:font.size.medium,lineHeight:font.lineHeight.medium},LabelMedium:{...common,fontFamily:font.family.sans,fontWeight:font.weight.regular,fontSize:font.size.medium,lineHeight:font.lineHeight.medium},LabelSmall:{...common,fontFamily:font.family.sans,fontWeight:font.weight.regular,fontSize:font.size.small,lineHeight:font.lineHeight.small},LabelXSmall:{...common,fontFamily:font.family.sans,fontWeight:font.weight.regular,fontSize:font.size.xSmall,lineHeight:font.lineHeight.xSmall},Caption:{...common,fontFamily:font.family.sans,fontWeight:font.weight.regular,fontSize:font.size.small,lineHeight:font.lineHeight.medium},Footnote:{...common,fontFamily:font.family.sans,fontWeight:font.weight.regular,fontSize:font.size.xSmall,lineHeight:font.lineHeight.small}});
 
-const _excluded$f = ["style", "children", "tag"];
-const Title = React.forwardRef(function Title(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "h1"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$f);
-  return React.createElement(Text, _extends({}, otherProps, {
-    tag: tag,
-    style: [styles.Title, style],
-    ref: ref
-  }), children);
-});
+const Title=React.forwardRef(function Title({style,children,tag="h1",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.Title,style],ref:ref,children:children})});
 
-const _excluded$e = ["style", "children", "tag"];
-const HeadingLarge = React.forwardRef(function HeadingLarge(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "h2"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$e);
-  return React.createElement(Text, _extends({}, otherProps, {
-    tag: tag,
-    style: [styles.HeadingLarge, style],
-    ref: ref
-  }), children);
-});
+const HeadingLarge=React.forwardRef(function HeadingLarge({style,children,tag="h2",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.HeadingLarge,style],ref:ref,children:children})});
 
-const _excluded$d = ["style", "children", "tag"];
-const HeadingMedium = React.forwardRef(function HeadingMedium(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "h3"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$d);
-  return React.createElement(Text, _extends({}, otherProps, {
-    tag: tag,
-    style: [styles.HeadingMedium, style],
-    ref: ref
-  }), children);
-});
+const HeadingMedium=React.forwardRef(function HeadingMedium({style,children,tag="h3",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.HeadingMedium,style],ref:ref,children:children})});
 
-const _excluded$c = ["style", "children", "tag"];
-const HeadingSmall = React.forwardRef(function HeadingSmall(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "h4"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$c);
-  return React.createElement(Text, _extends({}, otherProps, {
-    tag: tag,
-    style: [styles.HeadingSmall, style],
-    ref: ref
-  }), children);
-});
+const HeadingSmall=React.forwardRef(function HeadingSmall({style,children,tag="h4",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.HeadingSmall,style],ref:ref,children:children})});
 
-const _excluded$b = ["style", "children", "tag"];
-const HeadingXSmall = React.forwardRef(function HeadingXSmall(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "h4"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$b);
-  return React.createElement(Text, _extends({}, otherProps, {
-    tag: tag,
-    style: [styles.HeadingXSmall, style],
-    ref: ref
-  }), children);
-});
+const HeadingXSmall=React.forwardRef(function HeadingXSmall({style,children,tag="h4",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.HeadingXSmall,style],ref:ref,children:children})});
 
-const _excluded$a = ["style", "children", "tag"];
-const BodySerifBlock = React.forwardRef(function BodySerifBlock(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-  return React.createElement(Text, _extends({}, otherProps, {
-    tag: tag,
-    style: [styles.BodySerifBlock, style],
-    ref: ref
-  }), children);
-});
+const BodySerifBlock=React.forwardRef(function BodySerifBlock({style,children,tag="span",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.BodySerifBlock,style],ref:ref,children:children})});
 
-const _excluded$9 = ["style", "children", "tag"];
-const BodySerif = React.forwardRef(function BodySerif(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-  return React.createElement(Text, _extends({}, otherProps, {
-    tag: tag,
-    style: [styles.BodySerif, style],
-    ref: ref
-  }), children);
-});
+const BodySerif=React.forwardRef(function BodySerif({style,children,tag="span",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.BodySerif,style],ref:ref,children:children})});
 
-const _excluded$8 = ["style", "children", "tag"];
-const BodyMonospace = React.forwardRef(function BodyMonospace(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-  return React.createElement(Text, _extends({}, otherProps, {
-    tag: tag,
-    style: [styles.BodyMonospace, style],
-    ref: ref
-  }), children);
-});
+const BodyMonospace=React.forwardRef(function BodyMonospace({style,children,tag="span",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.BodyMonospace,style],ref:ref,children:children})});
 
-const _excluded$7 = ["style", "children", "tag"];
-const Body = React.forwardRef(function Body(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  return React.createElement(Text, _extends({}, otherProps, {
-    tag: tag,
-    style: [styles.Body, style],
-    ref: ref
-  }), children);
-});
+const Body=React.forwardRef(function Body({style,children,tag="span",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.Body,style],ref:ref,children:children})});
 
-const _excluded$6 = ["style", "children", "tag"];
-const LabelLarge = React.forwardRef(function LabelLarge(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  return React.createElement(Text, _extends({}, otherProps, {
-    tag: tag,
-    style: [styles.LabelLarge, style],
-    ref: ref
-  }), children);
-});
+const LabelLarge=React.forwardRef(function LabelLarge({style,children,tag="span",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.LabelLarge,style],ref:ref,children:children})});
 
-const _excluded$5 = ["style", "children", "tag"];
-const LabelMedium = React.forwardRef(function LabelMedium(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  return React.createElement(Text, _extends({}, otherProps, {
-    tag: tag,
-    style: [styles.LabelMedium, style],
-    ref: ref
-  }), children);
-});
+const LabelMedium=React.forwardRef(function LabelMedium({style,children,tag="span",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.LabelMedium,style],ref:ref,children:children})});
 
-const _excluded$4 = ["style", "children", "tag"];
-const LabelSmall = React.forwardRef(function LabelSmall(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  return React.createElement(Text, _extends({}, otherProps, {
-    tag: tag,
-    style: [styles.LabelSmall, style],
-    ref: ref
-  }), children);
-});
+const LabelSmall=React.forwardRef(function LabelSmall({style,children,tag="span",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.LabelSmall,style],ref:ref,children:children})});
 
-const _excluded$3 = ["style", "children", "tag"];
-const LabelXSmall = React.forwardRef(function LabelXSmall(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  return React.createElement(Text, _extends({}, otherProps, {
-    tag: tag,
-    style: [styles.LabelXSmall, style],
-    ref: ref
-  }), children);
-});
+const LabelXSmall=React.forwardRef(function LabelXSmall({style,children,tag="span",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.LabelXSmall,style],ref:ref,children:children})});
 
-const _excluded$2 = ["style", "children", "tag"];
-const Tagline = React.forwardRef(function Tagline(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  return React.createElement(Text, _extends({}, otherProps, {
-    tag: tag,
-    style: [styles.Tagline, style],
-    ref: ref
-  }), children);
-});
+const Tagline=React.forwardRef(function Tagline({style,children,tag="span",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.Tagline,style],ref:ref,children:children})});
 
-const _excluded$1 = ["style", "children", "tag"];
-const Caption = React.forwardRef(function Caption(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  return React.createElement(Text, _extends({}, otherProps, {
-    tag: tag,
-    style: [styles.Caption, style],
-    ref: ref
-  }), children);
-});
+const Caption=React.forwardRef(function Caption({style,children,tag="span",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.Caption,style],ref:ref,children:children})});
 
-const _excluded = ["style", "children", "tag"];
-const Footnote = React.forwardRef(function Footnote(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return React.createElement(Text, _extends({}, otherProps, {
-    tag: tag,
-    style: [styles.Footnote, style],
-    ref: ref
-  }), children);
-});
+const Footnote=React.forwardRef(function Footnote({style,children,tag="span",...otherProps},ref){return jsx(Text,{...otherProps,tag:tag,style:[styles.Footnote,style],ref:ref,children:children})});
 
 export { Body, BodyMonospace, BodySerif, BodySerifBlock, Caption, Footnote, HeadingLarge, HeadingMedium, HeadingSmall, HeadingXSmall, LabelLarge, LabelMedium, LabelSmall, LabelXSmall, Tagline, Title, styles };

package/dist/index.js

@@ -2,14 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
 var aphrodite = require('aphrodite');
-var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
     var n = Object.create(null);
@@ -28,379 +26,41 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const Regular = 400;
-const Bold = 700;
-const Black = 900;
-const mobile = "@media (max-width: 1023px)";
-const desktop = "@media (min-width: 1024px)";
-const common = {
-  display: "block"
-};
-const SansFamily = 'Lato, "Noto Sans", sans-serif';
-const SerifFamily = '"Noto Serif", serif';
-const InconsolataFamily = "Inconsolata, monospace";
-const styles = aphrodite.StyleSheet.create({
-  Title: _extends__default["default"]({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Black,
-    [desktop]: {
-      fontSize: 36,
-      lineHeight: "40px"
-    },
-    [mobile]: {
-      fontSize: 28,
-      lineHeight: "32px"
-    }
-  }),
-  Tagline: _extends__default["default"]({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Regular,
-    fontSize: 20,
-    lineHeight: "24px"
-  }),
-  HeadingLarge: _extends__default["default"]({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Bold,
-    [desktop]: {
-      fontSize: 28,
-      lineHeight: "32px"
-    },
-    [mobile]: {
-      fontSize: 24,
-      lineHeight: "28px"
-    }
-  }),
-  HeadingMedium: _extends__default["default"]({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Bold,
-    [desktop]: {
-      fontSize: 24,
-      lineHeight: "28px"
-    },
-    [mobile]: {
-      fontSize: 22,
-      lineHeight: "26px"
-    }
-  }),
-  HeadingSmall: _extends__default["default"]({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Bold,
-    fontSize: 20,
-    lineHeight: "24px"
-  }),
-  HeadingXSmall: _extends__default["default"]({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Bold,
-    fontSize: 12,
-    lineHeight: "16px",
-    letterSpacing: 0.6,
-    textTransform: "uppercase"
-  }),
-  BodySerifBlock: _extends__default["default"]({}, common, {
-    fontFamily: SerifFamily,
-    fontWeight: Regular,
-    fontSize: 22,
-    lineHeight: "28px"
-  }),
-  BodySerif: _extends__default["default"]({}, common, {
-    fontFamily: SerifFamily,
-    fontWeight: Regular,
-    fontSize: 18,
-    lineHeight: "22px"
-  }),
-  BodyMonospace: _extends__default["default"]({}, common, {
-    fontFamily: InconsolataFamily,
-    fontWeight: Regular,
-    fontSize: 17,
-    lineHeight: "22px"
-  }),
-  Body: _extends__default["default"]({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Regular,
-    fontSize: 16,
-    lineHeight: "22px"
-  }),
-  LabelLarge: _extends__default["default"]({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Bold,
-    fontSize: 16,
-    lineHeight: "20px"
-  }),
-  LabelMedium: _extends__default["default"]({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Regular,
-    fontSize: 16,
-    lineHeight: "20px"
-  }),
-  LabelSmall: _extends__default["default"]({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Regular,
-    fontSize: 14,
-    lineHeight: "18px"
-  }),
-  LabelXSmall: _extends__default["default"]({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Regular,
-    fontSize: 12,
-    lineHeight: "16px"
-  }),
-  Caption: _extends__default["default"]({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Regular,
-    fontSize: 14,
-    lineHeight: "20px"
-  }),
-  Footnote: _extends__default["default"]({}, common, {
-    fontFamily: SansFamily,
-    fontWeight: Regular,
-    fontSize: 12,
-    lineHeight: "18px"
-  })
-});
+const common={display:"block"};const styles=aphrodite.StyleSheet.create({Title:{...common,fontFamily:wonderBlocksTokens.font.family.sans,fontWeight:wonderBlocksTokens.font.weight.black,[wonderBlocksTokens.breakpoint.mediaQuery.xl]:{fontSize:wonderBlocksTokens.font.size.xxxLarge,lineHeight:wonderBlocksTokens.font.lineHeight.xxxLarge},[wonderBlocksTokens.breakpoint.mediaQuery.mdOrSmaller]:{fontSize:wonderBlocksTokens.font.size.xxLarge,lineHeight:wonderBlocksTokens.font.lineHeight.xxLarge}},Tagline:{...common,fontFamily:wonderBlocksTokens.font.family.sans,fontWeight:wonderBlocksTokens.font.weight.regular,fontSize:wonderBlocksTokens.font.size.large,lineHeight:wonderBlocksTokens.font.lineHeight.large},HeadingLarge:{...common,fontFamily:wonderBlocksTokens.font.family.sans,fontWeight:wonderBlocksTokens.font.weight.bold,[wonderBlocksTokens.breakpoint.mediaQuery.xl]:{fontSize:wonderBlocksTokens.font.size.xxLarge,lineHeight:wonderBlocksTokens.font.lineHeight.xxLarge},[wonderBlocksTokens.breakpoint.mediaQuery.mdOrSmaller]:{fontSize:wonderBlocksTokens.font.size.xLarge,lineHeight:wonderBlocksTokens.font.lineHeight.xLarge}},HeadingMedium:{...common,fontFamily:wonderBlocksTokens.font.family.sans,fontWeight:wonderBlocksTokens.font.weight.bold,[wonderBlocksTokens.breakpoint.mediaQuery.xl]:{fontSize:wonderBlocksTokens.font.size.xLarge,lineHeight:wonderBlocksTokens.font.lineHeight.xLarge},[wonderBlocksTokens.breakpoint.mediaQuery.mdOrSmaller]:{fontSize:"2.2rem",lineHeight:"2.6rem"}},HeadingSmall:{...common,fontFamily:wonderBlocksTokens.font.family.sans,fontWeight:wonderBlocksTokens.font.weight.bold,fontSize:wonderBlocksTokens.font.size.large,lineHeight:wonderBlocksTokens.font.lineHeight.large},HeadingXSmall:{...common,fontFamily:wonderBlocksTokens.font.family.sans,fontWeight:wonderBlocksTokens.font.weight.bold,fontSize:wonderBlocksTokens.font.size.xSmall,lineHeight:wonderBlocksTokens.font.lineHeight.xSmall,letterSpacing:.6,textTransform:"uppercase"},BodySerifBlock:{...common,fontFamily:wonderBlocksTokens.font.family.serif,fontWeight:wonderBlocksTokens.font.weight.regular,fontSize:wonderBlocksTokens.font.size.large,lineHeight:wonderBlocksTokens.font.lineHeight.large},BodySerif:{...common,fontFamily:wonderBlocksTokens.font.family.serif,fontWeight:wonderBlocksTokens.font.weight.regular,fontSize:wonderBlocksTokens.font.size.medium,lineHeight:wonderBlocksTokens.font.size.medium},BodyMonospace:{...common,fontFamily:wonderBlocksTokens.font.family.mono,fontWeight:wonderBlocksTokens.font.weight.regular,fontSize:wonderBlocksTokens.font.size.medium,lineHeight:wonderBlocksTokens.font.lineHeight.medium},Body:{...common,fontFamily:wonderBlocksTokens.font.family.sans,fontWeight:wonderBlocksTokens.font.weight.regular,fontSize:wonderBlocksTokens.font.size.medium,lineHeight:wonderBlocksTokens.font.lineHeight.xMedium},LabelLarge:{...common,fontFamily:wonderBlocksTokens.font.family.sans,fontWeight:wonderBlocksTokens.font.weight.bold,fontSize:wonderBlocksTokens.font.size.medium,lineHeight:wonderBlocksTokens.font.lineHeight.medium},LabelMedium:{...common,fontFamily:wonderBlocksTokens.font.family.sans,fontWeight:wonderBlocksTokens.font.weight.regular,fontSize:wonderBlocksTokens.font.size.medium,lineHeight:wonderBlocksTokens.font.lineHeight.medium},LabelSmall:{...common,fontFamily:wonderBlocksTokens.font.family.sans,fontWeight:wonderBlocksTokens.font.weight.regular,fontSize:wonderBlocksTokens.font.size.small,lineHeight:wonderBlocksTokens.font.lineHeight.small},LabelXSmall:{...common,fontFamily:wonderBlocksTokens.font.family.sans,fontWeight:wonderBlocksTokens.font.weight.regular,fontSize:wonderBlocksTokens.font.size.xSmall,lineHeight:wonderBlocksTokens.font.lineHeight.xSmall},Caption:{...common,fontFamily:wonderBlocksTokens.font.family.sans,fontWeight:wonderBlocksTokens.font.weight.regular,fontSize:wonderBlocksTokens.font.size.small,lineHeight:wonderBlocksTokens.font.lineHeight.medium},Footnote:{...common,fontFamily:wonderBlocksTokens.font.family.sans,fontWeight:wonderBlocksTokens.font.weight.regular,fontSize:wonderBlocksTokens.font.size.xSmall,lineHeight:wonderBlocksTokens.font.lineHeight.small}});
 
-const _excluded$f = ["style", "children", "tag"];
-const Title = React__namespace.forwardRef(function Title(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "h1"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$f);
-  return React__namespace.createElement(wonderBlocksCore.Text, _extends__default["default"]({}, otherProps, {
-    tag: tag,
-    style: [styles.Title, style],
-    ref: ref
-  }), children);
-});
+const Title=React__namespace.forwardRef(function Title({style,children,tag="h1",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.Title,style],ref:ref,children:children})});
 
-const _excluded$e = ["style", "children", "tag"];
-const HeadingLarge = React__namespace.forwardRef(function HeadingLarge(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "h2"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$e);
-  return React__namespace.createElement(wonderBlocksCore.Text, _extends__default["default"]({}, otherProps, {
-    tag: tag,
-    style: [styles.HeadingLarge, style],
-    ref: ref
-  }), children);
-});
+const HeadingLarge=React__namespace.forwardRef(function HeadingLarge({style,children,tag="h2",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.HeadingLarge,style],ref:ref,children:children})});
 
-const _excluded$d = ["style", "children", "tag"];
-const HeadingMedium = React__namespace.forwardRef(function HeadingMedium(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "h3"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$d);
-  return React__namespace.createElement(wonderBlocksCore.Text, _extends__default["default"]({}, otherProps, {
-    tag: tag,
-    style: [styles.HeadingMedium, style],
-    ref: ref
-  }), children);
-});
+const HeadingMedium=React__namespace.forwardRef(function HeadingMedium({style,children,tag="h3",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.HeadingMedium,style],ref:ref,children:children})});
 
-const _excluded$c = ["style", "children", "tag"];
-const HeadingSmall = React__namespace.forwardRef(function HeadingSmall(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "h4"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$c);
-  return React__namespace.createElement(wonderBlocksCore.Text, _extends__default["default"]({}, otherProps, {
-    tag: tag,
-    style: [styles.HeadingSmall, style],
-    ref: ref
-  }), children);
-});
+const HeadingSmall=React__namespace.forwardRef(function HeadingSmall({style,children,tag="h4",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.HeadingSmall,style],ref:ref,children:children})});
 
-const _excluded$b = ["style", "children", "tag"];
-const HeadingXSmall = React__namespace.forwardRef(function HeadingXSmall(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "h4"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$b);
-  return React__namespace.createElement(wonderBlocksCore.Text, _extends__default["default"]({}, otherProps, {
-    tag: tag,
-    style: [styles.HeadingXSmall, style],
-    ref: ref
-  }), children);
-});
+const HeadingXSmall=React__namespace.forwardRef(function HeadingXSmall({style,children,tag="h4",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.HeadingXSmall,style],ref:ref,children:children})});
 
-const _excluded$a = ["style", "children", "tag"];
-const BodySerifBlock = React__namespace.forwardRef(function BodySerifBlock(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$a);
-  return React__namespace.createElement(wonderBlocksCore.Text, _extends__default["default"]({}, otherProps, {
-    tag: tag,
-    style: [styles.BodySerifBlock, style],
-    ref: ref
-  }), children);
-});
+const BodySerifBlock=React__namespace.forwardRef(function BodySerifBlock({style,children,tag="span",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.BodySerifBlock,style],ref:ref,children:children})});
 
-const _excluded$9 = ["style", "children", "tag"];
-const BodySerif = React__namespace.forwardRef(function BodySerif(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$9);
-  return React__namespace.createElement(wonderBlocksCore.Text, _extends__default["default"]({}, otherProps, {
-    tag: tag,
-    style: [styles.BodySerif, style],
-    ref: ref
-  }), children);
-});
+const BodySerif=React__namespace.forwardRef(function BodySerif({style,children,tag="span",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.BodySerif,style],ref:ref,children:children})});
 
-const _excluded$8 = ["style", "children", "tag"];
-const BodyMonospace = React__namespace.forwardRef(function BodyMonospace(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$8);
-  return React__namespace.createElement(wonderBlocksCore.Text, _extends__default["default"]({}, otherProps, {
-    tag: tag,
-    style: [styles.BodyMonospace, style],
-    ref: ref
-  }), children);
-});
+const BodyMonospace=React__namespace.forwardRef(function BodyMonospace({style,children,tag="span",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.BodyMonospace,style],ref:ref,children:children})});
 
-const _excluded$7 = ["style", "children", "tag"];
-const Body = React__namespace.forwardRef(function Body(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$7);
-  return React__namespace.createElement(wonderBlocksCore.Text, _extends__default["default"]({}, otherProps, {
-    tag: tag,
-    style: [styles.Body, style],
-    ref: ref
-  }), children);
-});
+const Body=React__namespace.forwardRef(function Body({style,children,tag="span",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.Body,style],ref:ref,children:children})});
 
-const _excluded$6 = ["style", "children", "tag"];
-const LabelLarge = React__namespace.forwardRef(function LabelLarge(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$6);
-  return React__namespace.createElement(wonderBlocksCore.Text, _extends__default["default"]({}, otherProps, {
-    tag: tag,
-    style: [styles.LabelLarge, style],
-    ref: ref
-  }), children);
-});
+const LabelLarge=React__namespace.forwardRef(function LabelLarge({style,children,tag="span",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.LabelLarge,style],ref:ref,children:children})});
 
-const _excluded$5 = ["style", "children", "tag"];
-const LabelMedium = React__namespace.forwardRef(function LabelMedium(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$5);
-  return React__namespace.createElement(wonderBlocksCore.Text, _extends__default["default"]({}, otherProps, {
-    tag: tag,
-    style: [styles.LabelMedium, style],
-    ref: ref
-  }), children);
-});
+const LabelMedium=React__namespace.forwardRef(function LabelMedium({style,children,tag="span",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.LabelMedium,style],ref:ref,children:children})});
 
-const _excluded$4 = ["style", "children", "tag"];
-const LabelSmall = React__namespace.forwardRef(function LabelSmall(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$4);
-  return React__namespace.createElement(wonderBlocksCore.Text, _extends__default["default"]({}, otherProps, {
-    tag: tag,
-    style: [styles.LabelSmall, style],
-    ref: ref
-  }), children);
-});
+const LabelSmall=React__namespace.forwardRef(function LabelSmall({style,children,tag="span",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.LabelSmall,style],ref:ref,children:children})});
 
-const _excluded$3 = ["style", "children", "tag"];
-const LabelXSmall = React__namespace.forwardRef(function LabelXSmall(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$3);
-  return React__namespace.createElement(wonderBlocksCore.Text, _extends__default["default"]({}, otherProps, {
-    tag: tag,
-    style: [styles.LabelXSmall, style],
-    ref: ref
-  }), children);
-});
+const LabelXSmall=React__namespace.forwardRef(function LabelXSmall({style,children,tag="span",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.LabelXSmall,style],ref:ref,children:children})});
 
-const _excluded$2 = ["style", "children", "tag"];
-const Tagline = React__namespace.forwardRef(function Tagline(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$2);
-  return React__namespace.createElement(wonderBlocksCore.Text, _extends__default["default"]({}, otherProps, {
-    tag: tag,
-    style: [styles.Tagline, style],
-    ref: ref
-  }), children);
-});
+const Tagline=React__namespace.forwardRef(function Tagline({style,children,tag="span",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.Tagline,style],ref:ref,children:children})});
 
-const _excluded$1 = ["style", "children", "tag"];
-const Caption = React__namespace.forwardRef(function Caption(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$1);
-  return React__namespace.createElement(wonderBlocksCore.Text, _extends__default["default"]({}, otherProps, {
-    tag: tag,
-    style: [styles.Caption, style],
-    ref: ref
-  }), children);
-});
+const Caption=React__namespace.forwardRef(function Caption({style,children,tag="span",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.Caption,style],ref:ref,children:children})});
 
-const _excluded = ["style", "children", "tag"];
-const Footnote = React__namespace.forwardRef(function Footnote(_ref, ref) {
-  let {
-      style,
-      children,
-      tag = "span"
-    } = _ref,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded);
-  return React__namespace.createElement(wonderBlocksCore.Text, _extends__default["default"]({}, otherProps, {
-    tag: tag,
-    style: [styles.Footnote, style],
-    ref: ref
-  }), children);
-});
+const Footnote=React__namespace.forwardRef(function Footnote({style,children,tag="span",...otherProps},ref){return jsxRuntime.jsx(wonderBlocksCore.Text,{...otherProps,tag:tag,style:[styles.Footnote,style],ref:ref,children:children})});
 
 exports.Body = Body;
 exports.BodyMonospace = BodyMonospace;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-typography",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -12,15 +12,15 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-core": "12.2.1"
+    "@khanacademy/wonder-blocks-core": "12.2.1",
+    "@khanacademy/wonder-blocks-tokens": "10.0.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "18.2.0"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "2.1.1"
+    "@khanacademy/wb-dev-build-settings": "3.0.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"