@khanacademy/wonder-blocks-typography 2.1.0 → 2.1.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @khanacademy/wonder-blocks-typography
 
+## 2.1.2
+
+### Patch Changes
+
+-   Updated dependencies [1344436f]
+    -   @khanacademy/wonder-blocks-core@5.4.0
+
+## 2.1.1
+
+### Patch Changes
+
+-   9f3752d4: Used named functions in componenets with forwarded refs
+-   Updated dependencies [9f3752d4]
+    -   @khanacademy/wonder-blocks-core@5.3.1
+
 ## 2.1.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -161,7 +161,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 
 const _excluded$f = ["style", "children", "tag"];
-const Title = React.forwardRef((_ref, ref) => {
+const Title = React.forwardRef(function Title(_ref, ref) {
   let {
       style,
       children,
@@ -176,7 +176,7 @@ const Title = React.forwardRef((_ref, ref) => {
 });
 
 const _excluded$e = ["style", "children", "tag"];
-const HeadingLarge = React.forwardRef((_ref, ref) => {
+const HeadingLarge = React.forwardRef(function HeadingLarge(_ref, ref) {
   let {
       style,
       children,
@@ -191,7 +191,7 @@ const HeadingLarge = React.forwardRef((_ref, ref) => {
 });
 
 const _excluded$d = ["style", "children", "tag"];
-const HeadingMedium = React.forwardRef((_ref, ref) => {
+const HeadingMedium = React.forwardRef(function HeadingMedium(_ref, ref) {
   let {
       style,
       children,
@@ -206,7 +206,7 @@ const HeadingMedium = React.forwardRef((_ref, ref) => {
 });
 
 const _excluded$c = ["style", "children", "tag"];
-const HeadingSmall = React.forwardRef((_ref, ref) => {
+const HeadingSmall = React.forwardRef(function HeadingSmall(_ref, ref) {
   let {
       style,
       children,
@@ -221,7 +221,7 @@ const HeadingSmall = React.forwardRef((_ref, ref) => {
 });
 
 const _excluded$b = ["style", "children", "tag"];
-const HeadingXSmall = React.forwardRef((_ref, ref) => {
+const HeadingXSmall = React.forwardRef(function HeadingXSmall(_ref, ref) {
   let {
       style,
       children,
@@ -236,7 +236,7 @@ const HeadingXSmall = React.forwardRef((_ref, ref) => {
 });
 
 const _excluded$a = ["style", "children", "tag"];
-const BodySerifBlock = React.forwardRef((_ref, ref) => {
+const BodySerifBlock = React.forwardRef(function BodySerifBlock(_ref, ref) {
   let {
       style,
       children,
@@ -251,7 +251,7 @@ const BodySerifBlock = React.forwardRef((_ref, ref) => {
 });
 
 const _excluded$9 = ["style", "children", "tag"];
-const BodySerif = React.forwardRef((_ref, ref) => {
+const BodySerif = React.forwardRef(function BodySerif(_ref, ref) {
   let {
       style,
       children,
@@ -266,7 +266,7 @@ const BodySerif = React.forwardRef((_ref, ref) => {
 });
 
 const _excluded$8 = ["style", "children", "tag"];
-const BodyMonospace = React.forwardRef((_ref, ref) => {
+const BodyMonospace = React.forwardRef(function BodyMonospace(_ref, ref) {
   let {
       style,
       children,
@@ -281,7 +281,7 @@ const BodyMonospace = React.forwardRef((_ref, ref) => {
 });
 
 const _excluded$7 = ["style", "children", "tag"];
-const Body = React.forwardRef((_ref, ref) => {
+const Body = React.forwardRef(function Body(_ref, ref) {
   let {
       style,
       children,
@@ -296,7 +296,7 @@ const Body = React.forwardRef((_ref, ref) => {
 });
 
 const _excluded$6 = ["style", "children", "tag"];
-const LabelLarge = React.forwardRef((_ref, ref) => {
+const LabelLarge = React.forwardRef(function LabelLarge(_ref, ref) {
   let {
       style,
       children,
@@ -311,7 +311,7 @@ const LabelLarge = React.forwardRef((_ref, ref) => {
 });
 
 const _excluded$5 = ["style", "children", "tag"];
-const LabelMedium = React.forwardRef((_ref, ref) => {
+const LabelMedium = React.forwardRef(function LabelMedium(_ref, ref) {
   let {
       style,
       children,
@@ -326,7 +326,7 @@ const LabelMedium = React.forwardRef((_ref, ref) => {
 });
 
 const _excluded$4 = ["style", "children", "tag"];
-const LabelSmall = React.forwardRef((_ref, ref) => {
+const LabelSmall = React.forwardRef(function LabelSmall(_ref, ref) {
   let {
       style,
       children,
@@ -341,7 +341,7 @@ const LabelSmall = React.forwardRef((_ref, ref) => {
 });
 
 const _excluded$3 = ["style", "children", "tag"];
-const LabelXSmall = React.forwardRef((_ref, ref) => {
+const LabelXSmall = React.forwardRef(function LabelXSmall(_ref, ref) {
   let {
       style,
       children,
@@ -356,7 +356,7 @@ const LabelXSmall = React.forwardRef((_ref, ref) => {
 });
 
 const _excluded$2 = ["style", "children", "tag"];
-const Tagline = React.forwardRef((_ref, ref) => {
+const Tagline = React.forwardRef(function Tagline(_ref, ref) {
   let {
       style,
       children,
@@ -371,7 +371,7 @@ const Tagline = React.forwardRef((_ref, ref) => {
 });
 
 const _excluded$1 = ["style", "children", "tag"];
-const Caption = React.forwardRef((_ref, ref) => {
+const Caption = React.forwardRef(function Caption(_ref, ref) {
   let {
       style,
       children,
@@ -386,7 +386,7 @@ const Caption = React.forwardRef((_ref, ref) => {
 });
 
 const _excluded = ["style", "children", "tag"];
-const Footnote = React.forwardRef((_ref, ref) => {
+const Footnote = React.forwardRef(function Footnote(_ref, ref) {
   let {
       style,
       children,

package/dist/index.js

@@ -185,7 +185,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 
 const _excluded$f = ["style", "children", "tag"];
-const Title = React__namespace.forwardRef((_ref, ref) => {
+const Title = React__namespace.forwardRef(function Title(_ref, ref) {
   let {
       style,
       children,
@@ -200,7 +200,7 @@ const Title = React__namespace.forwardRef((_ref, ref) => {
 });
 
 const _excluded$e = ["style", "children", "tag"];
-const HeadingLarge = React__namespace.forwardRef((_ref, ref) => {
+const HeadingLarge = React__namespace.forwardRef(function HeadingLarge(_ref, ref) {
   let {
       style,
       children,
@@ -215,7 +215,7 @@ const HeadingLarge = React__namespace.forwardRef((_ref, ref) => {
 });
 
 const _excluded$d = ["style", "children", "tag"];
-const HeadingMedium = React__namespace.forwardRef((_ref, ref) => {
+const HeadingMedium = React__namespace.forwardRef(function HeadingMedium(_ref, ref) {
   let {
       style,
       children,
@@ -230,7 +230,7 @@ const HeadingMedium = React__namespace.forwardRef((_ref, ref) => {
 });
 
 const _excluded$c = ["style", "children", "tag"];
-const HeadingSmall = React__namespace.forwardRef((_ref, ref) => {
+const HeadingSmall = React__namespace.forwardRef(function HeadingSmall(_ref, ref) {
   let {
       style,
       children,
@@ -245,7 +245,7 @@ const HeadingSmall = React__namespace.forwardRef((_ref, ref) => {
 });
 
 const _excluded$b = ["style", "children", "tag"];
-const HeadingXSmall = React__namespace.forwardRef((_ref, ref) => {
+const HeadingXSmall = React__namespace.forwardRef(function HeadingXSmall(_ref, ref) {
   let {
       style,
       children,
@@ -260,7 +260,7 @@ const HeadingXSmall = React__namespace.forwardRef((_ref, ref) => {
 });
 
 const _excluded$a = ["style", "children", "tag"];
-const BodySerifBlock = React__namespace.forwardRef((_ref, ref) => {
+const BodySerifBlock = React__namespace.forwardRef(function BodySerifBlock(_ref, ref) {
   let {
       style,
       children,
@@ -275,7 +275,7 @@ const BodySerifBlock = React__namespace.forwardRef((_ref, ref) => {
 });
 
 const _excluded$9 = ["style", "children", "tag"];
-const BodySerif = React__namespace.forwardRef((_ref, ref) => {
+const BodySerif = React__namespace.forwardRef(function BodySerif(_ref, ref) {
   let {
       style,
       children,
@@ -290,7 +290,7 @@ const BodySerif = React__namespace.forwardRef((_ref, ref) => {
 });
 
 const _excluded$8 = ["style", "children", "tag"];
-const BodyMonospace = React__namespace.forwardRef((_ref, ref) => {
+const BodyMonospace = React__namespace.forwardRef(function BodyMonospace(_ref, ref) {
   let {
       style,
       children,
@@ -305,7 +305,7 @@ const BodyMonospace = React__namespace.forwardRef((_ref, ref) => {
 });
 
 const _excluded$7 = ["style", "children", "tag"];
-const Body = React__namespace.forwardRef((_ref, ref) => {
+const Body = React__namespace.forwardRef(function Body(_ref, ref) {
   let {
       style,
       children,
@@ -320,7 +320,7 @@ const Body = React__namespace.forwardRef((_ref, ref) => {
 });
 
 const _excluded$6 = ["style", "children", "tag"];
-const LabelLarge = React__namespace.forwardRef((_ref, ref) => {
+const LabelLarge = React__namespace.forwardRef(function LabelLarge(_ref, ref) {
   let {
       style,
       children,
@@ -335,7 +335,7 @@ const LabelLarge = React__namespace.forwardRef((_ref, ref) => {
 });
 
 const _excluded$5 = ["style", "children", "tag"];
-const LabelMedium = React__namespace.forwardRef((_ref, ref) => {
+const LabelMedium = React__namespace.forwardRef(function LabelMedium(_ref, ref) {
   let {
       style,
       children,
@@ -350,7 +350,7 @@ const LabelMedium = React__namespace.forwardRef((_ref, ref) => {
 });
 
 const _excluded$4 = ["style", "children", "tag"];
-const LabelSmall = React__namespace.forwardRef((_ref, ref) => {
+const LabelSmall = React__namespace.forwardRef(function LabelSmall(_ref, ref) {
   let {
       style,
       children,
@@ -365,7 +365,7 @@ const LabelSmall = React__namespace.forwardRef((_ref, ref) => {
 });
 
 const _excluded$3 = ["style", "children", "tag"];
-const LabelXSmall = React__namespace.forwardRef((_ref, ref) => {
+const LabelXSmall = React__namespace.forwardRef(function LabelXSmall(_ref, ref) {
   let {
       style,
       children,
@@ -380,7 +380,7 @@ const LabelXSmall = React__namespace.forwardRef((_ref, ref) => {
 });
 
 const _excluded$2 = ["style", "children", "tag"];
-const Tagline = React__namespace.forwardRef((_ref, ref) => {
+const Tagline = React__namespace.forwardRef(function Tagline(_ref, ref) {
   let {
       style,
       children,
@@ -395,7 +395,7 @@ const Tagline = React__namespace.forwardRef((_ref, ref) => {
 });
 
 const _excluded$1 = ["style", "children", "tag"];
-const Caption = React__namespace.forwardRef((_ref, ref) => {
+const Caption = React__namespace.forwardRef(function Caption(_ref, ref) {
   let {
       style,
       children,
@@ -410,7 +410,7 @@ const Caption = React__namespace.forwardRef((_ref, ref) => {
 });
 
 const _excluded = ["style", "children", "tag"];
-const Footnote = React__namespace.forwardRef((_ref, ref) => {
+const Footnote = React__namespace.forwardRef(function Footnote(_ref, ref) {
   let {
       style,
       children,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-typography",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -16,7 +16,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "^5.3.0"
+    "@khanacademy/wonder-blocks-core": "^5.4.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

package/src/components/body-monospace.tsx

@@ -1,23 +1,24 @@
 import * as React from "react";
-import {Text} from "@khanacademy/wonder-blocks-core";
+import {PropsFor, Text} from "@khanacademy/wonder-blocks-core";
 
 import styles from "../util/styles";
 
-import type {Props} from "../util/types";
+type Props = PropsFor<typeof Text>;
 
-const BodyMonospace = React.forwardRef(
-    ({style, children, tag = "span", ...otherProps}: Props, ref) => {
-        return (
-            <Text
-                {...otherProps}
-                tag={tag}
-                style={[styles.BodyMonospace, style]}
-                ref={ref}
-            >
-                {children}
-            </Text>
-        );
-    },
-);
+const BodyMonospace = React.forwardRef(function BodyMonospace(
+    {style, children, tag = "span", ...otherProps}: Props,
+    ref,
+) {
+    return (
+        <Text
+            {...otherProps}
+            tag={tag}
+            style={[styles.BodyMonospace, style]}
+            ref={ref}
+        >
+            {children}
+        </Text>
+    );
+});
 
 export default BodyMonospace;

package/src/components/body-serif-block.tsx

@@ -1,23 +1,24 @@
 import * as React from "react";
-import {Text} from "@khanacademy/wonder-blocks-core";
+import {PropsFor, Text} from "@khanacademy/wonder-blocks-core";
 
 import styles from "../util/styles";
 
-import type {Props} from "../util/types";
+type Props = PropsFor<typeof Text>;
 
-const BodySerifBlock = React.forwardRef(
-    ({style, children, tag = "span", ...otherProps}: Props, ref) => {
-        return (
-            <Text
-                {...otherProps}
-                tag={tag}
-                style={[styles.BodySerifBlock, style]}
-                ref={ref}
-            >
-                {children}
-            </Text>
-        );
-    },
-);
+const BodySerifBlock = React.forwardRef(function BodySerifBlock(
+    {style, children, tag = "span", ...otherProps}: Props,
+    ref,
+) {
+    return (
+        <Text
+            {...otherProps}
+            tag={tag}
+            style={[styles.BodySerifBlock, style]}
+            ref={ref}
+        >
+            {children}
+        </Text>
+    );
+});
 
 export default BodySerifBlock;

package/src/components/body-serif.tsx

@@ -1,23 +1,24 @@
 import * as React from "react";
-import {Text} from "@khanacademy/wonder-blocks-core";
+import {PropsFor, Text} from "@khanacademy/wonder-blocks-core";
 
 import styles from "../util/styles";
 
-import type {Props} from "../util/types";
+type Props = PropsFor<typeof Text>;
 
-const BodySerif = React.forwardRef(
-    ({style, children, tag = "span", ...otherProps}: Props, ref) => {
-        return (
-            <Text
-                {...otherProps}
-                tag={tag}
-                style={[styles.BodySerif, style]}
-                ref={ref}
-            >
-                {children}
-            </Text>
-        );
-    },
-);
+const BodySerif = React.forwardRef(function BodySerif(
+    {style, children, tag = "span", ...otherProps}: Props,
+    ref,
+) {
+    return (
+        <Text
+            {...otherProps}
+            tag={tag}
+            style={[styles.BodySerif, style]}
+            ref={ref}
+        >
+            {children}
+        </Text>
+    );
+});
 
 export default BodySerif;

package/src/components/body.tsx

@@ -1,23 +1,19 @@
 import * as React from "react";
-import {Text} from "@khanacademy/wonder-blocks-core";
+import {PropsFor, Text} from "@khanacademy/wonder-blocks-core";
 
 import styles from "../util/styles";
 
-import type {Props} from "../util/types";
+type Props = PropsFor<typeof Text>;
 
-const Body = React.forwardRef(
-    ({style, children, tag = "span", ...otherProps}: Props, ref) => {
-        return (
-            <Text
-                {...otherProps}
-                tag={tag}
-                style={[styles.Body, style]}
-                ref={ref}
-            >
-                {children}
-            </Text>
-        );
-    },
-);
+const Body = React.forwardRef(function Body(
+    {style, children, tag = "span", ...otherProps}: Props,
+    ref,
+) {
+    return (
+        <Text {...otherProps} tag={tag} style={[styles.Body, style]} ref={ref}>
+            {children}
+        </Text>
+    );
+});
 
 export default Body;

package/src/components/caption.tsx

@@ -1,23 +1,24 @@
 import * as React from "react";
-import {Text} from "@khanacademy/wonder-blocks-core";
+import {PropsFor, Text} from "@khanacademy/wonder-blocks-core";
 
 import styles from "../util/styles";
 
-import type {Props} from "../util/types";
+type Props = PropsFor<typeof Text>;
 
-const Caption = React.forwardRef(
-    ({style, children, tag = "span", ...otherProps}: Props, ref) => {
-        return (
-            <Text
-                {...otherProps}
-                tag={tag}
-                style={[styles.Caption, style]}
-                ref={ref}
-            >
-                {children}
-            </Text>
-        );
-    },
-);
+const Caption = React.forwardRef(function Caption(
+    {style, children, tag = "span", ...otherProps}: Props,
+    ref,
+) {
+    return (
+        <Text
+            {...otherProps}
+            tag={tag}
+            style={[styles.Caption, style]}
+            ref={ref}
+        >
+            {children}
+        </Text>
+    );
+});
 
 export default Caption;

package/src/components/footnote.tsx

@@ -1,23 +1,24 @@
 import * as React from "react";
-import {Text} from "@khanacademy/wonder-blocks-core";
+import {PropsFor, Text} from "@khanacademy/wonder-blocks-core";
 
 import styles from "../util/styles";
 
-import type {Props} from "../util/types";
+type Props = PropsFor<typeof Text>;
 
-const Footnote = React.forwardRef(
-    ({style, children, tag = "span", ...otherProps}: Props, ref) => {
-        return (
-            <Text
-                {...otherProps}
-                tag={tag}
-                style={[styles.Footnote, style]}
-                ref={ref}
-            >
-                {children}
-            </Text>
-        );
-    },
-);
+const Footnote = React.forwardRef(function Footnote(
+    {style, children, tag = "span", ...otherProps}: Props,
+    ref,
+) {
+    return (
+        <Text
+            {...otherProps}
+            tag={tag}
+            style={[styles.Footnote, style]}
+            ref={ref}
+        >
+            {children}
+        </Text>
+    );
+});
 
 export default Footnote;

package/src/components/heading-large.tsx

@@ -1,23 +1,24 @@
 import * as React from "react";
-import {Text} from "@khanacademy/wonder-blocks-core";
+import {PropsFor, Text} from "@khanacademy/wonder-blocks-core";
 
 import styles from "../util/styles";
 
-import type {Props} from "../util/types";
+type Props = PropsFor<typeof Text>;
 
-const HeadingLarge = React.forwardRef(
-    ({style, children, tag = "h2", ...otherProps}: Props, ref) => {
-        return (
-            <Text
-                {...otherProps}
-                tag={tag}
-                style={[styles.HeadingLarge, style]}
-                ref={ref}
-            >
-                {children}
-            </Text>
-        );
-    },
-);
+const HeadingLarge = React.forwardRef(function HeadingLarge(
+    {style, children, tag = "h2", ...otherProps}: Props,
+    ref,
+) {
+    return (
+        <Text
+            {...otherProps}
+            tag={tag}
+            style={[styles.HeadingLarge, style]}
+            ref={ref}
+        >
+            {children}
+        </Text>
+    );
+});
 
 export default HeadingLarge;

package/src/components/heading-medium.tsx

@@ -1,23 +1,24 @@
 import * as React from "react";
-import {Text} from "@khanacademy/wonder-blocks-core";
+import {PropsFor, Text} from "@khanacademy/wonder-blocks-core";
 
 import styles from "../util/styles";
 
-import type {Props} from "../util/types";
+type Props = PropsFor<typeof Text>;
 
-const HeadingMedium = React.forwardRef(
-    ({style, children, tag = "h3", ...otherProps}: Props, ref) => {
-        return (
-            <Text
-                {...otherProps}
-                tag={tag}
-                style={[styles.HeadingMedium, style]}
-                ref={ref}
-            >
-                {children}
-            </Text>
-        );
-    },
-);
+const HeadingMedium = React.forwardRef(function HeadingMedium(
+    {style, children, tag = "h3", ...otherProps}: Props,
+    ref,
+) {
+    return (
+        <Text
+            {...otherProps}
+            tag={tag}
+            style={[styles.HeadingMedium, style]}
+            ref={ref}
+        >
+            {children}
+        </Text>
+    );
+});
 
 export default HeadingMedium;