@khanacademy/wonder-blocks-dropdown 10.3.11 → 10.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/.turbo/turbo-build$colon$css.log +1 -1
  2. package/CHANGELOG.md +28 -0
  3. package/dist/components/action-menu.d.ts +5 -3
  4. package/dist/components/dropdown-core.d.ts +2 -1
  5. package/dist/components/dropdown-popper.d.ts +2 -1
  6. package/dist/css/vars.css +2 -2
  7. package/dist/es/index.js +3 -3
  8. package/dist/index.js +2 -2
  9. package/package.json +12 -12
package/.turbo/turbo-build$colon$css.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @khanacademy/wonder-blocks-dropdown@10.3.11 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown
2
+ > @khanacademy/wonder-blocks-dropdown@10.4.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown
3
3
  > pnpm exec wonder-blocks-tokens .
4
4
 
5
5
  CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown/dist/css
package/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # @khanacademy/wonder-blocks-dropdown
2
2
 
3
+ ## 10.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 6f24d7d: Allow ActionMenu to support any valid popper placement
8
+
9
+ ## 10.3.12
10
+
11
+ ### Patch Changes
12
+
13
+ - f627dca: Updates listbox to use boxShadow tokens
14
+ - 6963849: Updated `core.shadow.transparent` to use the new subcategories (`low`, `mid`, `high`)
15
+ - Updated dependencies [6963849]
16
+ - Updated dependencies [f627dca]
17
+ - Updated dependencies [6963849]
18
+ - Updated dependencies [f627dca]
19
+ - @khanacademy/wonder-blocks-tokens@14.0.0
20
+ - @khanacademy/wonder-blocks-modal@8.4.3
21
+ - @khanacademy/wonder-blocks-cell@5.0.14
22
+ - @khanacademy/wonder-blocks-clickable@7.1.26
23
+ - @khanacademy/wonder-blocks-form@7.3.8
24
+ - @khanacademy/wonder-blocks-icon@5.2.20
25
+ - @khanacademy/wonder-blocks-icon-button@10.5.1
26
+ - @khanacademy/wonder-blocks-pill@3.1.41
27
+ - @khanacademy/wonder-blocks-search-field@5.1.46
28
+ - @khanacademy/wonder-blocks-styles@0.2.32
29
+ - @khanacademy/wonder-blocks-typography@4.2.22
30
+
3
31
  ## 10.3.11
4
32
 
5
33
  ### Patch Changes
package/dist/components/action-menu.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { type AriaProps, type StyleType } from "@khanacademy/wonder-blocks-core";
3
+ import { Placement } from "@popperjs/core";
3
4
  import DropdownOpener from "./dropdown-opener";
4
5
  import type { Item, DropdownItem, OpenerProps } from "../util/types";
5
6
  type Props = AriaProps & Readonly<{
@@ -31,10 +32,11 @@ type Props = AriaProps & Readonly<{
31
32
  */
32
33
  selectedValues?: Array<string>;
33
34
  /**
34
- * Whether this menu should be left-aligned or right-aligned with the
35
- * opener component. Defaults to left-aligned.
35
+ * The alignment of the menu component in relation to the opener
36
+ * component. Defaults to "left", which is below the opener and left
37
+ * aligned. Any valid Popper placement is also supported.
36
38
  */
37
- alignment: "left" | "right";
39
+ alignment: "left" | "right" | Placement;
38
40
  /**
39
41
  * Whether this component is disabled. A disabled dropdown may not be opened
40
42
  * and does not support interaction. Defaults to false.
package/dist/components/dropdown-core.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from "react";
2
2
  import type { StyleType } from "@khanacademy/wonder-blocks-core";
3
+ import { Placement } from "@popperjs/core";
3
4
  import type { DropdownItem } from "../util/types";
4
5
  type LabelsValues = {
5
6
  /**
@@ -89,7 +90,7 @@ type ExportProps = Readonly<{
89
90
  * Whether this menu should be left-aligned or right-aligned with the
90
91
  * opener component. Defaults to left-aligned.
91
92
  */
92
- alignment?: "left" | "right";
93
+ alignment?: "left" | "right" | Placement;
93
94
  /**
94
95
  * Whether to auto focus an option. Defaults to true.
95
96
  */
package/dist/components/dropdown-popper.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from "react";
2
2
  import type { StyleType } from "@khanacademy/wonder-blocks-core";
3
+ import { Placement } from "@popperjs/core";
3
4
  type Props = {
4
5
  /**
5
6
  * The children that will be wrapped by PopperJS.
@@ -13,7 +14,7 @@ type Props = {
13
14
  * Whether this menu should be left-aligned or right-aligned with the
14
15
  * reference component. Defaults to left-aligned.
15
16
  */
16
- alignment?: "left" | "right";
17
+ alignment?: "left" | "right" | Placement;
17
18
  /**
18
19
  * The popper's reference.
19
20
  * @see https://popper.js.org/react-popper/v2/render-props/#innerref
package/dist/css/vars.css CHANGED
@@ -1,7 +1,7 @@
1
1
  :root {--wb-c-dropdown-listbox-border-radius: var(--wb-border-radius-radius_040);
2
2
  --wb-c-dropdown-listbox-layout-padding-inline: var(--wb-sizing-size_0);
3
3
  --wb-c-dropdown-listbox-layout-padding-block: var(--wb-sizing-size_040);
4
- --wb-c-dropdown-listbox-shadow-default: 0 var(--wb-sizing-size_080) var(--wb-sizing-size_080) 0 var(--wb-semanticColor-core-shadow-transparent);
4
+ --wb-c-dropdown-listbox-shadow-default: var(--wb-boxShadow-mid);
5
5
  --wb-c-dropdown-opener-border-width-error: var(--wb-border-width-thin);
6
6
  --wb-c-dropdown-opener-border-radius-rest: var(--wb-border-radius-radius_040);
7
7
  --wb-c-dropdown-opener-color-icon: var(--wb-semanticColor-core-foreground-neutral-default);
@@ -18,7 +18,7 @@
18
18
  [data-wb-theme='thunderblocks'] {--wb-c-dropdown-listbox-border-radius: var(--wb-border-radius-radius_080);
19
19
  --wb-c-dropdown-listbox-layout-padding-inline: var(--wb-sizing-size_080);
20
20
  --wb-c-dropdown-listbox-layout-padding-block: var(--wb-sizing-size_080);
21
- --wb-c-dropdown-listbox-shadow-default: 0 var(--wb-sizing-size_020) var(--wb-sizing-size_020) 0 var(--wb-semanticColor-core-shadow-transparent);
21
+ --wb-c-dropdown-listbox-shadow-default: var(--wb-boxShadow-low);
22
22
  --wb-c-dropdown-opener-border-width-error: var(--wb-border-width-medium);
23
23
  --wb-c-dropdown-opener-border-radius-rest: var(--wb-border-radius-radius_080);
24
24
  --wb-c-dropdown-opener-color-icon: var(--wb-semanticColor-core-foreground-instructive-default);
package/dist/es/index.js CHANGED
@@ -3,7 +3,7 @@ import * as React from 'react';
3
3
  import { useId } from 'react';
4
4
  import { StyleSheet } from 'aphrodite';
5
5
  import { DetailCell } from '@khanacademy/wonder-blocks-cell';
6
- import { sizing, border, semanticColor, font, mapValuesToCssVars } from '@khanacademy/wonder-blocks-tokens';
6
+ import { sizing, border, boxShadow, semanticColor, font, mapValuesToCssVars } from '@khanacademy/wonder-blocks-tokens';
7
7
  import { BodyText } from '@khanacademy/wonder-blocks-typography';
8
8
  import { focusStyles } from '@khanacademy/wonder-blocks-styles';
9
9
  import { View, keys, addStyle, Id, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
@@ -29,7 +29,7 @@ import Pill from '@khanacademy/wonder-blocks-pill';
29
29
 
30
30
  const selectDropdownStyle={marginBlock:sizing.size_080};const filterableDropdownStyle={minHeight:100};const DROPDOWN_ITEM_HEIGHT=40;const MAX_VISIBLE_ITEMS=9;const SEPARATOR_ITEM_HEIGHT=9;const defaultLabels={clearSearch:"Clear search",filter:"Filter",noResults:"No results",selectNoneLabel:"Select none",selectAllLabel:numOptions=>`Select all (${numOptions})`,noneSelected:"0 items",someSelected:numSelectedValues=>numSelectedValues===1?"1 item":`${numSelectedValues} items`,allSelected:"All items"};const defaultComboboxLabels={clearSelection:"Clear selection",closedState:"Combobox is closed",comboboxButton:"Toggle listbox",listbox:"Options list",removeSelected:label=>`Remove ${label}`,liveRegionCurrentItem:({current,index,total,disabled,focused,selected})=>`${current}${focused?" focused":""}${disabled?" disabled":""}${selected?" selected":""}, ${index+1} of ${total}.`,liveRegionMultipleSelectionTotal:total=>`${total} selected options.`,liveRegionListboxTotal:total=>`${total} results available.`,noItems:"No results",selected:labels=>`${labels} selected`,selectionCleared:"Selection cleared",unselected:labels=>`${labels} not selected`};
31
31
 
32
- var themeDefault = {listbox:{border:{radius:border.radius.radius_040},layout:{padding:{inline:sizing.size_0,block:sizing.size_040}},shadow:{default:`0 ${sizing.size_080} ${sizing.size_080} 0 ${semanticColor.core.shadow.transparent}`}},opener:{border:{width:{error:border.width.thin},radius:{rest:border.radius.radius_040}},color:{icon:semanticColor.core.foreground.neutral.default},layout:{padding:{inline:sizing.size_160,inlineStart:sizing.size_160,inlineEnd:sizing.size_120}}},item:{border:{radius:{default:border.radius.radius_040,press:border.radius.radius_040}},layout:{padding:{block:sizing.size_100,inlineStart:sizing.size_080,inlineEnd:sizing.size_160}},font:{weight:font.weight.regular}}};
32
+ var themeDefault = {listbox:{border:{radius:border.radius.radius_040},layout:{padding:{inline:sizing.size_0,block:sizing.size_040}},shadow:{default:boxShadow.mid}},opener:{border:{width:{error:border.width.thin},radius:{rest:border.radius.radius_040}},color:{icon:semanticColor.core.foreground.neutral.default},layout:{padding:{inline:sizing.size_160,inlineStart:sizing.size_160,inlineEnd:sizing.size_120}}},item:{border:{radius:{default:border.radius.radius_040,press:border.radius.radius_040}},layout:{padding:{block:sizing.size_100,inlineStart:sizing.size_080,inlineEnd:sizing.size_160}},font:{weight:font.weight.regular}}};
33
33
 
34
34
  var theme$3 = mapValuesToCssVars(themeDefault,"--wb-c-dropdown-");
35
35
 
@@ -53,7 +53,7 @@ class DropdownCoreVirtualized extends React.Component{componentDidMount(){const{
53
53
 
54
54
  function modifyMaxHeight({state,options}){const overflow=detectOverflow(state,options);const{y}=state.modifiersData.preventOverflow||{x:0,y:0};const{height}=state.rects.popper;const[basePlacement]=state.placement.split("-");const heightProp=basePlacement==="top"?"top":"bottom";const maxHeight=height-overflow[heightProp]-y;state.styles.popper={...state.styles.popper,maxHeight:`${maxHeight}px`,["--popper-max-height"]:`${maxHeight}px`};}const maxHeightModifier={name:"maxHeight",enabled:true,phase:"main",options:{padding:DROPDOWN_ITEM_HEIGHT},requiresIfExists:["offset","preventOverflow","flip"],fn:modifyMaxHeight};
55
55
 
56
- const modifiers=[{name:"preventOverflow",options:{rootBoundary:"viewport",altAxis:true,tether:false}},maxHeightModifier];const DropdownPopper=function({children,alignment="left",onPopperElement,referenceElement}){const modalHost=maybeGetPortalMountedModalHostElement(referenceElement)||document.querySelector("body");if(!modalHost){return null}return ReactDOM.createPortal(jsx(Popper,{innerRef:node=>{if(node&&onPopperElement){onPopperElement(node);}},referenceElement:referenceElement,strategy:"fixed",placement:alignment==="left"?"bottom-start":"bottom-end",modifiers:modifiers,children:({placement,ref,style,hasPopperEscaped,isReferenceHidden})=>{const shouldHidePopper=!!(hasPopperEscaped||isReferenceHidden);return jsx("div",{ref:ref,style:style,"data-testid":"dropdown-popper","data-placement":placement,children:children(shouldHidePopper)})}}),modalHost)};
56
+ const modifiers=[{name:"preventOverflow",options:{rootBoundary:"viewport",altAxis:true,tether:false}},maxHeightModifier];const DropdownPopper=function({children,alignment="left",onPopperElement,referenceElement}){const modalHost=maybeGetPortalMountedModalHostElement(referenceElement)||document.querySelector("body");if(!modalHost){return null}const placement=alignment==="left"?"bottom-start":alignment==="right"?"bottom-end":alignment;return ReactDOM.createPortal(jsx(Popper,{innerRef:node=>{if(node&&onPopperElement){onPopperElement(node);}},referenceElement:referenceElement,strategy:"fixed",placement:placement,modifiers:modifiers,children:({placement,ref,style,hasPopperEscaped,isReferenceHidden})=>{const shouldHidePopper=!!(hasPopperEscaped||isReferenceHidden);return jsx("div",{ref:ref,style:style,"data-testid":"dropdown-popper","data-placement":placement,children:children(shouldHidePopper)})}}),modalHost)};
57
57
 
58
58
  function getStringForKey(key){if(key.length===1||!/^[A-Z]/i.test(key)){return key}return ""}function debounce(callback,wait){let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);callback(...args);};clearTimeout(timeout);timeout=setTimeout(later,wait);}}function isString(x){return typeof x==="string"}function getLabel(props){if(isString(props.label)){return props.label}if(isString(props.labelAsText)){return props.labelAsText}return ""}function getSelectOpenerLabel(showOpenerLabelAsText,props){if(showOpenerLabelAsText){return getLabel(props)}return props.label}
59
59
 
package/dist/index.js CHANGED
@@ -62,7 +62,7 @@ var Pill__default = /*#__PURE__*/_interopDefaultLegacy(Pill);
62
62
 
63
63
  const selectDropdownStyle={marginBlock:wonderBlocksTokens.sizing.size_080};const filterableDropdownStyle={minHeight:100};const DROPDOWN_ITEM_HEIGHT=40;const MAX_VISIBLE_ITEMS=9;const SEPARATOR_ITEM_HEIGHT=9;const defaultLabels={clearSearch:"Clear search",filter:"Filter",noResults:"No results",selectNoneLabel:"Select none",selectAllLabel:numOptions=>`Select all (${numOptions})`,noneSelected:"0 items",someSelected:numSelectedValues=>numSelectedValues===1?"1 item":`${numSelectedValues} items`,allSelected:"All items"};const defaultComboboxLabels={clearSelection:"Clear selection",closedState:"Combobox is closed",comboboxButton:"Toggle listbox",listbox:"Options list",removeSelected:label=>`Remove ${label}`,liveRegionCurrentItem:({current,index,total,disabled,focused,selected})=>`${current}${focused?" focused":""}${disabled?" disabled":""}${selected?" selected":""}, ${index+1} of ${total}.`,liveRegionMultipleSelectionTotal:total=>`${total} selected options.`,liveRegionListboxTotal:total=>`${total} results available.`,noItems:"No results",selected:labels=>`${labels} selected`,selectionCleared:"Selection cleared",unselected:labels=>`${labels} not selected`};
64
64
 
65
- var themeDefault = {listbox:{border:{radius:wonderBlocksTokens.border.radius.radius_040},layout:{padding:{inline:wonderBlocksTokens.sizing.size_0,block:wonderBlocksTokens.sizing.size_040}},shadow:{default:`0 ${wonderBlocksTokens.sizing.size_080} ${wonderBlocksTokens.sizing.size_080} 0 ${wonderBlocksTokens.semanticColor.core.shadow.transparent}`}},opener:{border:{width:{error:wonderBlocksTokens.border.width.thin},radius:{rest:wonderBlocksTokens.border.radius.radius_040}},color:{icon:wonderBlocksTokens.semanticColor.core.foreground.neutral.default},layout:{padding:{inline:wonderBlocksTokens.sizing.size_160,inlineStart:wonderBlocksTokens.sizing.size_160,inlineEnd:wonderBlocksTokens.sizing.size_120}}},item:{border:{radius:{default:wonderBlocksTokens.border.radius.radius_040,press:wonderBlocksTokens.border.radius.radius_040}},layout:{padding:{block:wonderBlocksTokens.sizing.size_100,inlineStart:wonderBlocksTokens.sizing.size_080,inlineEnd:wonderBlocksTokens.sizing.size_160}},font:{weight:wonderBlocksTokens.font.weight.regular}}};
65
+ var themeDefault = {listbox:{border:{radius:wonderBlocksTokens.border.radius.radius_040},layout:{padding:{inline:wonderBlocksTokens.sizing.size_0,block:wonderBlocksTokens.sizing.size_040}},shadow:{default:wonderBlocksTokens.boxShadow.mid}},opener:{border:{width:{error:wonderBlocksTokens.border.width.thin},radius:{rest:wonderBlocksTokens.border.radius.radius_040}},color:{icon:wonderBlocksTokens.semanticColor.core.foreground.neutral.default},layout:{padding:{inline:wonderBlocksTokens.sizing.size_160,inlineStart:wonderBlocksTokens.sizing.size_160,inlineEnd:wonderBlocksTokens.sizing.size_120}}},item:{border:{radius:{default:wonderBlocksTokens.border.radius.radius_040,press:wonderBlocksTokens.border.radius.radius_040}},layout:{padding:{block:wonderBlocksTokens.sizing.size_100,inlineStart:wonderBlocksTokens.sizing.size_080,inlineEnd:wonderBlocksTokens.sizing.size_160}},font:{weight:wonderBlocksTokens.font.weight.regular}}};
66
66
 
67
67
  var theme$3 = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-dropdown-");
68
68
 
@@ -86,7 +86,7 @@ class DropdownCoreVirtualized extends React__namespace.Component{componentDidMou
86
86
 
87
87
  function modifyMaxHeight({state,options}){const overflow=core.detectOverflow(state,options);const{y}=state.modifiersData.preventOverflow||{x:0,y:0};const{height}=state.rects.popper;const[basePlacement]=state.placement.split("-");const heightProp=basePlacement==="top"?"top":"bottom";const maxHeight=height-overflow[heightProp]-y;state.styles.popper={...state.styles.popper,maxHeight:`${maxHeight}px`,["--popper-max-height"]:`${maxHeight}px`};}const maxHeightModifier={name:"maxHeight",enabled:true,phase:"main",options:{padding:DROPDOWN_ITEM_HEIGHT},requiresIfExists:["offset","preventOverflow","flip"],fn:modifyMaxHeight};
88
88
 
89
- const modifiers=[{name:"preventOverflow",options:{rootBoundary:"viewport",altAxis:true,tether:false}},maxHeightModifier];const DropdownPopper=function({children,alignment="left",onPopperElement,referenceElement}){const modalHost=wonderBlocksModal.maybeGetPortalMountedModalHostElement(referenceElement)||document.querySelector("body");if(!modalHost){return null}return ReactDOM__namespace.createPortal(jsxRuntime.jsx(reactPopper.Popper,{innerRef:node=>{if(node&&onPopperElement){onPopperElement(node);}},referenceElement:referenceElement,strategy:"fixed",placement:alignment==="left"?"bottom-start":"bottom-end",modifiers:modifiers,children:({placement,ref,style,hasPopperEscaped,isReferenceHidden})=>{const shouldHidePopper=!!(hasPopperEscaped||isReferenceHidden);return jsxRuntime.jsx("div",{ref:ref,style:style,"data-testid":"dropdown-popper","data-placement":placement,children:children(shouldHidePopper)})}}),modalHost)};
89
+ const modifiers=[{name:"preventOverflow",options:{rootBoundary:"viewport",altAxis:true,tether:false}},maxHeightModifier];const DropdownPopper=function({children,alignment="left",onPopperElement,referenceElement}){const modalHost=wonderBlocksModal.maybeGetPortalMountedModalHostElement(referenceElement)||document.querySelector("body");if(!modalHost){return null}const placement=alignment==="left"?"bottom-start":alignment==="right"?"bottom-end":alignment;return ReactDOM__namespace.createPortal(jsxRuntime.jsx(reactPopper.Popper,{innerRef:node=>{if(node&&onPopperElement){onPopperElement(node);}},referenceElement:referenceElement,strategy:"fixed",placement:placement,modifiers:modifiers,children:({placement,ref,style,hasPopperEscaped,isReferenceHidden})=>{const shouldHidePopper=!!(hasPopperEscaped||isReferenceHidden);return jsxRuntime.jsx("div",{ref:ref,style:style,"data-testid":"dropdown-popper","data-placement":placement,children:children(shouldHidePopper)})}}),modalHost)};
90
90
 
91
91
  function getStringForKey(key){if(key.length===1||!/^[A-Z]/i.test(key)){return key}return ""}function debounce(callback,wait){let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);callback(...args);};clearTimeout(timeout);timeout=setTimeout(later,wait);}}function isString(x){return typeof x==="string"}function getLabel(props){if(isString(props.label)){return props.label}if(isString(props.labelAsText)){return props.labelAsText}return ""}function getSelectOpenerLabel(showOpenerLabelAsText,props){if(showOpenerLabelAsText){return getLabel(props)}return props.label}
92
92
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-dropdown",
3
- "version": "10.3.11",
3
+ "version": "10.4.0",
4
4
  "design": "v1",
5
5
  "description": "Dropdown variants for Wonder Blocks.",
6
6
  "main": "dist/index.js",
@@ -21,19 +21,19 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@khanacademy/wonder-blocks-announcer": "1.0.3",
24
- "@khanacademy/wonder-blocks-cell": "5.0.13",
25
- "@khanacademy/wonder-blocks-clickable": "7.1.25",
24
+ "@khanacademy/wonder-blocks-form": "7.3.8",
25
+ "@khanacademy/wonder-blocks-icon": "5.2.20",
26
+ "@khanacademy/wonder-blocks-cell": "5.0.14",
26
27
  "@khanacademy/wonder-blocks-core": "12.4.0",
27
- "@khanacademy/wonder-blocks-form": "7.3.7",
28
- "@khanacademy/wonder-blocks-icon": "5.2.19",
29
- "@khanacademy/wonder-blocks-icon-button": "10.5.0",
30
- "@khanacademy/wonder-blocks-modal": "8.4.2",
31
- "@khanacademy/wonder-blocks-pill": "3.1.40",
32
- "@khanacademy/wonder-blocks-search-field": "5.1.45",
33
- "@khanacademy/wonder-blocks-styles": "0.2.31",
28
+ "@khanacademy/wonder-blocks-icon-button": "10.5.1",
29
+ "@khanacademy/wonder-blocks-modal": "8.4.3",
30
+ "@khanacademy/wonder-blocks-clickable": "7.1.26",
31
+ "@khanacademy/wonder-blocks-pill": "3.1.41",
32
+ "@khanacademy/wonder-blocks-search-field": "5.1.46",
33
+ "@khanacademy/wonder-blocks-styles": "0.2.32",
34
+ "@khanacademy/wonder-blocks-tokens": "14.0.0",
34
35
  "@khanacademy/wonder-blocks-timing": "7.0.2",
35
- "@khanacademy/wonder-blocks-tokens": "13.0.0",
36
- "@khanacademy/wonder-blocks-typography": "4.2.21"
36
+ "@khanacademy/wonder-blocks-typography": "4.2.22"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "@phosphor-icons/core": "^2.0.2",