@khanacademy/wonder-blocks-cell 4.1.24 → 5.0.0

package/.turbo/turbo-build$colon$css.log

@@ -0,0 +1,5 @@
+
+> @khanacademy/wonder-blocks-cell@5.0.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-cell
+> pnpm exec wonder-blocks-tokens .
+
+CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-cell/dist/css

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @khanacademy/wonder-blocks-cell
 
+## 5.0.0
+
+### Major Changes
+
+- f50aafc: Removes `rootStyle` prop as it is no longer needed
+
+### Minor Changes
+
+- 8fca4ae: Updates `CompactCell` and `DetailCell` to support the `thunderblocks` theme. Refactors internal typography to support both themes.
+- 89c89a7: Creates a Cell theme that supports CSS variables
+- 88c633a: Adds `tabIndex` as a prop in case Clickable cells can't be focusable via keyboard navigation
+
+### Patch Changes
+
+- 89c89a7: Refactors Cell structure by removing Strut in favor of CSS's gap property
+- f50aafc: Restructures Cell layout
+- Updated dependencies [de9435a]
+- Updated dependencies [f50aafc]
+    - @khanacademy/wonder-blocks-tokens@11.2.1
+    - @khanacademy/wonder-blocks-clickable@7.1.12
+    - @khanacademy/wonder-blocks-styles@0.2.19
+    - @khanacademy/wonder-blocks-typography@4.2.8
+
+## 4.1.25
+
+### Patch Changes
+
+- Updated dependencies [e457d8c]
+    - @khanacademy/wonder-blocks-tokens@11.2.0
+    - @khanacademy/wonder-blocks-clickable@7.1.11
+    - @khanacademy/wonder-blocks-layout@3.1.22
+    - @khanacademy/wonder-blocks-typography@4.2.7
+
 ## 4.1.24
 
 ### Patch Changes

package/dist/components/internal/common.d.ts

@@ -1,26 +1,5 @@
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 import type { HorizontalRuleVariant } from "../../util/types";
-export declare const CellMeasurements: {
-    readonly cellMinHeight: 48;
-    /**
-     * The cell wrapper's gap.
-     */
-    readonly cellPadding: {
-        readonly paddingVertical: 12;
-        readonly paddingHorizontal: 16;
-    };
-    /**
-     * The DetailCell wrapper's gap.
-     */
-    readonly detailCellPadding: {
-        readonly paddingVertical: 16;
-        readonly paddingHorizontal: 16;
-    };
-    /**
-     * The horizontal spacing between the left and right accessory.
-     */
-    readonly accessoryHorizontalSpacing: 16;
-};
 /**
  * Gets the horizontalRule style based on the variant.
  * @param {HorizontalRuleVariant} horizontalRule The variant of the horizontal

package/dist/css/vars.css

@@ -0,0 +1,53 @@
+:root {--wb-c-cell-root-border-width-default: var(--wb-border-width-medium);
+--wb-c-cell-root-border-width-selected: var(--wb-border-width-thick);
+--wb-c-cell-root-border-radius-default: var(--wb-border-radius-radius_0);
+--wb-c-cell-root-border-radius-focus: var(--wb-border-radius-radius_040);
+--wb-c-cell-root-border-radius-press: var(--wb-border-radius-radius_0);
+--wb-c-cell-root-border-radius-focusPress: var(--wb-border-radius-radius_040);
+--wb-c-cell-root-color-press-border: var(--wb-semanticColor-core-border-instructive-default);
+--wb-c-cell-root-color-selected-foreground: var(--wb-semanticColor-core-foreground-instructive-default);
+--wb-c-cell-root-color-selected-border: var(--wb-semanticColor-core-border-instructive-default);
+--wb-c-cell-root-layout-gap-default: var(--wb-sizing-size_160);
+--wb-c-cell-root-layout-gap-detail: var(--wb-sizing-size_020);
+--wb-c-cell-root-layout-padding-block-default: var(--wb-sizing-size_120);
+--wb-c-cell-root-layout-padding-block-detail: var(--wb-sizing-size_160);
+--wb-c-cell-root-layout-padding-inline-default: var(--wb-sizing-size_160);
+--wb-c-cell-root-layout-padding-inline-detail: var(--wb-sizing-size_160);
+--wb-c-cell-root-sizing-minHeight: var(--wb-sizing-size_480);
+--wb-c-cell-accessoryLeft-color-default-foreground: inherit;
+--wb-c-cell-accessoryRight-color-default-foreground: var(--wb-semanticColor-core-foreground-neutral-default);
+--wb-c-cell-accessoryRight-color-selected-foreground: var(--wb-semanticColor-core-foreground-instructive-subtle);
+--wb-c-cell-accessoryRight-color-disabled-foreground: var(--wb-semanticColor-core-foreground-neutral-strong);
+--wb-c-cell-rule-sizing-height: var(--wb-sizing-size_020);
+--wb-c-cell-rule-shadow: inset 0px -1px 0px var(--wb-semanticColor-core-border-inverse-default);
+--wb-c-cell-title-font-lineHeight: var(--wb-font-body-lineHeight-medium);
+--wb-c-cell-subtitle-color-foreground: var(--wb-semanticColor-core-foreground-neutral-default);
+--wb-c-cell-subtitle-font-size: var(--wb-font-body-size-small);
+--wb-c-cell-subtitle-font-lineHeight: var(--wb-font-body-lineHeight-small);}
+
+[data-wb-theme='thunderblocks'] {--wb-c-cell-root-border-width-default: var(--wb-border-width-medium);
+--wb-c-cell-root-border-width-selected: var(--wb-border-width-thick);
+--wb-c-cell-root-border-radius-default: var(--wb-border-radius-radius_080);
+--wb-c-cell-root-border-radius-focus: var(--wb-border-radius-radius_080);
+--wb-c-cell-root-border-radius-press: var(--wb-border-radius-radius_120);
+--wb-c-cell-root-border-radius-focusPress: var(--wb-border-radius-radius_120);
+--wb-c-cell-root-color-press-border: var(--wb-semanticColor-core-transparent);
+--wb-c-cell-root-color-selected-foreground: var(--wb-semanticColor-core-foreground-neutral-strong);
+--wb-c-cell-root-color-selected-border: var(--wb-semanticColor-core-transparent);
+--wb-c-cell-root-layout-gap-default: var(--wb-sizing-size_120);
+--wb-c-cell-root-layout-gap-detail: var(--wb-sizing-size_040);
+--wb-c-cell-root-layout-padding-block-default: var(--wb-sizing-size_120);
+--wb-c-cell-root-layout-padding-block-detail: var(--wb-sizing-size_120);
+--wb-c-cell-root-layout-padding-inline-default: var(--wb-sizing-size_120);
+--wb-c-cell-root-layout-padding-inline-detail: var(--wb-sizing-size_120);
+--wb-c-cell-root-sizing-minHeight: var(--wb-sizing-size_440);
+--wb-c-cell-accessoryLeft-color-default-foreground: var(--wb-semanticColor-core-foreground-neutral-subtle);
+--wb-c-cell-accessoryRight-color-default-foreground: var(--wb-semanticColor-core-foreground-neutral-subtle);
+--wb-c-cell-accessoryRight-color-selected-foreground: var(--wb-semanticColor-core-foreground-instructive-default);
+--wb-c-cell-accessoryRight-color-disabled-foreground: var(--wb-semanticColor-core-foreground-neutral-strong);
+--wb-c-cell-rule-sizing-height: var(--wb-sizing-size_0);
+--wb-c-cell-rule-shadow: none;
+--wb-c-cell-title-font-lineHeight: var(--wb-font-heading-lineHeight-small);
+--wb-c-cell-subtitle-color-foreground: var(--wb-semanticColor-core-foreground-neutral-subtle);
+--wb-c-cell-subtitle-font-size: var(--wb-font-body-size-xsmall);
+--wb-c-cell-subtitle-font-lineHeight: var(--wb-font-body-lineHeight-xsmall);}

package/dist/es/index.js

@@ -1,18 +1,22 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import 'react';
-import { LabelMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
+import { BodyText } from '@khanacademy/wonder-blocks-typography';
 import { StyleSheet } from 'aphrodite';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { View } from '@khanacademy/wonder-blocks-core';
-import { Strut } from '@khanacademy/wonder-blocks-layout';
-import { spacing, color, semanticColor, border } from '@khanacademy/wonder-blocks-tokens';
+import { border, semanticColor, sizing, font, mapValuesToCssVars } from '@khanacademy/wonder-blocks-tokens';
+import { focusStyles } from '@khanacademy/wonder-blocks-styles';
 
-const CellMeasurements={cellMinHeight:spacing.xxLarge_48,cellPadding:{paddingVertical:spacing.small_12,paddingHorizontal:spacing.medium_16},detailCellPadding:{paddingVertical:spacing.medium_16,paddingHorizontal:spacing.medium_16},accessoryHorizontalSpacing:spacing.medium_16};const getHorizontalRuleStyles=horizontalRule=>{switch(horizontalRule){case"inset":return [styles$2.horizontalRule,styles$2.horizontalRuleInset];case"full-width":return styles$2.horizontalRule;case"none":return {}}};const styles$2=StyleSheet.create({horizontalRule:{position:"relative",":after":{width:"100%",content:"''",position:"absolute",bottom:0,right:0,height:spacing.xxxxSmall_2,boxShadow:`inset 0px -1px 0px ${color.offBlack8}`}},horizontalRuleInset:{":after":{width:`calc(100% - ${CellMeasurements.cellPadding.paddingHorizontal}px)`}}});
+var themeDefault = {root:{border:{width:{default:border.width.medium,selected:border.width.thick},radius:{default:border.radius.radius_0,focus:border.radius.radius_040,press:border.radius.radius_0,focusPress:border.radius.radius_040}},color:{press:{border:semanticColor.core.border.instructive.default},selected:{foreground:semanticColor.core.foreground.instructive.default,border:semanticColor.core.border.instructive.default}},layout:{gap:{default:sizing.size_160,detail:sizing.size_020},padding:{block:{default:sizing.size_120,detail:sizing.size_160},inline:{default:sizing.size_160,detail:sizing.size_160}}},sizing:{minHeight:sizing.size_480}},accessoryLeft:{color:{default:{foreground:"inherit"}}},accessoryRight:{color:{default:{foreground:semanticColor.core.foreground.neutral.default},selected:{foreground:semanticColor.core.foreground.instructive.subtle},disabled:{foreground:semanticColor.core.foreground.neutral.strong}}},rule:{sizing:{height:sizing.size_020},shadow:`inset 0px -1px 0px ${semanticColor.core.border.inverse.default}`},title:{font:{lineHeight:font.body.lineHeight.medium}},subtitle:{color:{foreground:semanticColor.core.foreground.neutral.default},font:{size:font.body.size.small,lineHeight:font.body.lineHeight.small}}};
 
-const LeftAccessory=({leftAccessory,leftAccessoryStyle,disabled})=>{if(!leftAccessory){return null}return jsxs(Fragment,{children:[jsx(View,{style:[styles$1.accessory,disabled&&styles$1.accessoryDisabled,{...leftAccessoryStyle}],children:leftAccessory}),jsx(Strut,{size:CellMeasurements.accessoryHorizontalSpacing})]})};const RightAccessory=({rightAccessory,rightAccessoryStyle,active,disabled})=>{if(!rightAccessory){return null}return jsxs(Fragment,{children:[jsx(Strut,{size:CellMeasurements.accessoryHorizontalSpacing}),jsx(View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...rightAccessoryStyle},active&&styles$1.accessoryActive],children:rightAccessory})]})};function CellInner(props){const{active,children,disabled,horizontalRule="inset",contentStyle=undefined,leftAccessory=undefined,leftAccessoryStyle=undefined,rightAccessory=undefined,rightAccessoryStyle=undefined,style,testId,innerStyle}=props;const horizontalRuleStyles=getHorizontalRuleStyles(horizontalRule);return jsxs(View,{style:[styles$1.innerWrapper,innerStyle,style,horizontalRuleStyles,active&&styles$1.activeInnerWrapper],className:"inner-wrapper",children:[jsx(LeftAccessory,{leftAccessory:leftAccessory,leftAccessoryStyle:leftAccessoryStyle,disabled:disabled}),jsx(View,{style:[styles$1.content,contentStyle],testId:testId,children:children}),jsx(RightAccessory,{rightAccessory:rightAccessory,rightAccessoryStyle:rightAccessoryStyle,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,rootStyle}=props;if(onClick||href){return jsx(Clickable,{disabled:disabled,onClick:onClick,href:href,hideDefaultFocusRing:true,"aria-label":ariaLabel?ariaLabel:undefined,"aria-selected":ariaSelected?ariaSelected:undefined,"aria-checked":ariaChecked,role:role,target:target,style:[styles$1.wrapper,styles$1.clickable,rootStyle,active&&styles$1.active,disabled&&styles$1.disabled],"aria-current":active?"true":undefined,children:()=>jsx(CellInner,{...props})})}return jsx(View,{style:[styles$1.wrapper,rootStyle,active&&styles$1.active],"aria-current":active?"true":undefined,role:role,children:jsx(CellInner,{...props})})};const cellTokens={root:{default:{background:semanticColor.surface.primary,foreground:semanticColor.text.primary},hover:{background:color.fadedBlue8},press:{background:color.fadedBlue8,border:semanticColor.surface.emphasis},selected:{background:color.fadedBlue8,foreground:color.activeBlue,border:semanticColor.surface.emphasis},focus:{border:semanticColor.focus.outer},disabled:{foreground:semanticColor.text.disabled,border:semanticColor.focus.outer}},accessory:{default:{foreground:semanticColor.icon.primary},selected:{foreground:semanticColor.icon.action},disabled:{foreground:semanticColor.icon.secondary}}};const styles$1=StyleSheet.create({wrapper:{background:cellTokens.root.default.background,color:cellTokens.root.default.foreground,display:"flex",minHeight:CellMeasurements.cellMinHeight,textAlign:"left",width:"100%"},innerWrapper:{minHeight:CellMeasurements.cellMinHeight,padding:`${CellMeasurements.cellPadding.paddingVertical}px ${CellMeasurements.cellPadding.paddingHorizontal}px`,flexDirection:"row",flex:1,borderRadius:"inherit",overflow:"hidden",height:"100%",":focus-visible":{padding:`${CellMeasurements.cellPadding.paddingVertical-2}px ${CellMeasurements.cellPadding.paddingHorizontal-2}px`}},activeInnerWrapper:{position:"relative",":before":{content:"''",position:"absolute",top:0,left:0,bottom:0,width:border.width.thick,backgroundColor:cellTokens.root.selected.border}},content:{alignSelf:"center",flex:1,overflowWrap:"break-word"},accessory:{minWidth:"auto",alignItems:"center",alignSelf:"center"},accessoryRight:{color:cellTokens.accessory.default.foreground},clickable:{outline:"none",[":hover[aria-disabled=true]"]:{cursor:"not-allowed"},":focus-visible":{borderRadius:border.radius.radius_040,overflow:"hidden",position:"relative"},[":focus-visible:after"]:{content:"''",position:"absolute",top:0,left:0,zIndex:1,width:`calc(100% - ${spacing.xxxSmall_4}px)`,height:`calc(100% - ${spacing.xxxSmall_4}px)`,border:`${spacing.xxxxSmall_2}px solid ${cellTokens.root.focus.border}`,borderRadius:border.radius.radius_040},[":focus-visible[aria-disabled=true]:after"]:{borderColor:cellTokens.root.disabled.border},[":hover[aria-disabled=false]"]:{background:cellTokens.root.hover.background},[":active[aria-disabled=false]"]:{background:cellTokens.root.press.background},[":active[aria-disabled=false]:not([aria-current=true]) .inner-wrapper"]:{position:"relative",":before":{content:"''",position:"absolute",top:0,left:0,bottom:0,width:border.width.medium,backgroundColor:semanticColor.surface.emphasis}}},active:{background:cellTokens.root.selected.background,color:cellTokens.root.selected.foreground,cursor:"default"},disabled:{color:cellTokens.root.disabled.foreground,":focus-visible":{outline:"none"}},accessoryActive:{color:cellTokens.accessory.selected.foreground},accessoryDisabled:{color:cellTokens.accessory.disabled.foreground,opacity:.32}});
+var theme = mapValuesToCssVars(themeDefault,"--wb-c-cell-");
 
-const CompactCell=function(props){const{title,...coreProps}=props;return jsx(CellCore,{...coreProps,children:typeof title==="string"?jsx(LabelMedium,{children:title}):title})};
+const getHorizontalRuleStyles=horizontalRule=>{switch(horizontalRule){case"inset":return [styles$2.horizontalRule,styles$2.horizontalRuleInset];case"full-width":return styles$2.horizontalRule;case"none":return {}}};const styles$2=StyleSheet.create({horizontalRule:{position:"relative",":after":{width:"100%",content:"''",position:"absolute",bottom:0,right:0,height:theme.rule.sizing.height,boxShadow:theme.rule.shadow}},horizontalRuleInset:{":after":{width:`calc(100% - ${theme.root.layout.padding.inline.default})`}}});
 
-const Subtitle=({subtitle,disabled})=>{if(!subtitle){return null}if(typeof subtitle==="string"){return jsx(LabelSmall,{style:!disabled&&styles.subtitle,children:subtitle})}return subtitle};const DetailCell=function(props){const{title,subtitle1,subtitle2,...coreProps}=props;return jsxs(CellCore,{...coreProps,innerStyle:styles.innerWrapper,children:[jsx(Subtitle,{subtitle:subtitle1,disabled:coreProps.disabled}),subtitle1&&jsx(Strut,{size:spacing.xxxxSmall_2}),typeof title==="string"?jsx(LabelMedium,{children:title}):title,subtitle2&&jsx(Strut,{size:spacing.xxxxSmall_2}),jsx(Subtitle,{subtitle:subtitle2,disabled:coreProps.disabled})]})};const styles=StyleSheet.create({subtitle:{color:semanticColor.text.secondary},innerWrapper:{padding:`${CellMeasurements.detailCellPadding.paddingVertical}px ${CellMeasurements.detailCellPadding.paddingHorizontal}px`}});
+const LeftAccessory=({leftAccessory,leftAccessoryStyle,disabled})=>{if(!leftAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...leftAccessoryStyle}],children:leftAccessory})};const RightAccessory=({rightAccessory,rightAccessoryStyle,active,disabled})=>{if(!rightAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...rightAccessoryStyle},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,leftAccessoryStyle=undefined,rightAccessory=undefined,rightAccessoryStyle=undefined,testId}=props;return jsxs(Fragment,{children:[jsx(LeftAccessory,{leftAccessory:leftAccessory,leftAccessoryStyle:leftAccessoryStyle,disabled:disabled}),jsx(View,{style:[styles$1.content,contentStyle],testId:testId,children:children}),jsx(RightAccessory,{rightAccessory:rightAccessory,rightAccessoryStyle:rightAccessoryStyle,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,horizontalRule="inset",style,innerStyle}=props;const horizontalRuleStyles=getHorizontalRuleStyles(horizontalRule);const sharedStyles=[styles$1.wrapper,innerStyle,active&&styles$1.active,horizontalRuleStyles];if(onClick||href){return jsx(Clickable,{disabled:disabled,onClick:onClick,href:href,hideDefaultFocusRing:true,"aria-label":ariaLabel?ariaLabel:undefined,"aria-selected":ariaSelected?ariaSelected:undefined,"aria-checked":ariaChecked,role:role,target:target,style:[sharedStyles,styles$1.clickable,disabled&&styles$1.disabled,style],"aria-current":active?"true":undefined,tabIndex:tabIndex,children:()=>jsx(CellInner,{...props})})}return jsx(View,{style:[sharedStyles,style],"aria-current":active?"true":undefined,role:role,children:jsx(CellInner,{...props})})};const styles$1=StyleSheet.create({wrapper:{background:semanticColor.surface.primary,borderRadius:theme.root.border.radius.default,color:semanticColor.core.foreground.neutral.strong,minHeight:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"left",width:"100%",display:"flex",flex:1,flexDirection:"row",gap:theme.root.layout.gap.default,paddingBlock:theme.root.layout.padding.block.default,paddingInline:theme.root.layout.padding.inline.default},content:{alignSelf:"center",flex:1,overflowWrap:"break-word"},accessory:{minWidth:"auto",alignItems:"center",alignSelf:"center"},accessoryLeft:{color:theme.accessoryLeft.color.default.foreground},accessoryRight:{color:theme.accessoryRight.color.default.foreground},clickable:{":hover":{background:semanticColor.core.background.instructive.subtle},":active":{background:semanticColor.core.background.instructive.subtle,borderRadius:theme.root.border.radius.press},":focus-visible":{borderRadius:theme.root.border.radius.focus,outline:focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${theme.root.border.width.default} * -1)`,boxShadow:`inset 0 0 0 calc(${border.width.medium}*2) ${semanticColor.focus.inner}`,overflow:"hidden",position:"relative",[":after"]:{content:"unset"}},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.focusPress},[":active[aria-disabled=false]:not([aria-current=true])"]:{position:"relative",":before":{content:"''",position:"absolute",top:0,left:0,bottom:0,width:theme.root.border.width.default,backgroundColor:theme.root.color.press.border}}},active:{background:semanticColor.core.background.instructive.subtle,color:theme.root.color.selected.foreground,cursor:"default",position:"relative",":before":{content:"''",position:"absolute",top:0,left:0,bottom:0,width:theme.root.border.width.selected,backgroundColor:theme.root.color.selected.border}},disabled:{background:semanticColor.surface.primary,borderRadius:theme.root.border.radius.default,color:semanticColor.core.foreground.inverse.subtle,":hover":{background:semanticColor.surface.primary,cursor:"not-allowed"},":active":{background:semanticColor.surface.primary,borderRadius:theme.root.border.radius.default},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.default}},accessoryActive:{color:theme.accessoryRight.color.selected.foreground},accessoryDisabled:{color:theme.accessoryRight.color.disabled.foreground,opacity:.32}});
+
+const CompactCell=function(props){const{title,...coreProps}=props;return jsx(CellCore,{...coreProps,children:typeof title==="string"?jsx(BodyText,{weight:"semi",style:{lineHeight:theme.title.font.lineHeight},children:title}):title})};
+
+const Subtitle=({subtitle,disabled})=>{if(!subtitle){return null}if(typeof subtitle==="string"){return jsx(BodyText,{size:"small",tag:"span",style:[!disabled&&styles.subtitle,{fontSize:theme.subtitle.font.size,lineHeight:theme.subtitle.font.lineHeight}],children:subtitle})}return subtitle};const DetailCell=function(props){const{contentStyle,title,subtitle1,subtitle2,...coreProps}=props;return jsxs(CellCore,{...coreProps,innerStyle:styles.innerWrapper,contentStyle:{gap:theme.root.layout.gap.detail,...contentStyle},children:[jsx(Subtitle,{subtitle:subtitle1,disabled:coreProps.disabled}),typeof title==="string"?jsx(BodyText,{weight:"semi",style:{lineHeight:theme.title.font.lineHeight},children:title}):title,jsx(Subtitle,{subtitle:subtitle2,disabled:coreProps.disabled})]})};const styles=StyleSheet.create({subtitle:{color:theme.subtitle.color.foreground},innerWrapper:{paddingBlock:theme.root.layout.padding.block.detail,paddingInline:theme.root.layout.padding.inline.detail}});
 
 export { CompactCell, DetailCell };

package/dist/index.js

@@ -8,20 +8,24 @@ var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var aphrodite = require('aphrodite');
 var Clickable = require('@khanacademy/wonder-blocks-clickable');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
-var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
+var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
 
-const CellMeasurements={cellMinHeight:wonderBlocksTokens.spacing.xxLarge_48,cellPadding:{paddingVertical:wonderBlocksTokens.spacing.small_12,paddingHorizontal:wonderBlocksTokens.spacing.medium_16},detailCellPadding:{paddingVertical:wonderBlocksTokens.spacing.medium_16,paddingHorizontal:wonderBlocksTokens.spacing.medium_16},accessoryHorizontalSpacing:wonderBlocksTokens.spacing.medium_16};const getHorizontalRuleStyles=horizontalRule=>{switch(horizontalRule){case"inset":return [styles$2.horizontalRule,styles$2.horizontalRuleInset];case"full-width":return styles$2.horizontalRule;case"none":return {}}};const styles$2=aphrodite.StyleSheet.create({horizontalRule:{position:"relative",":after":{width:"100%",content:"''",position:"absolute",bottom:0,right:0,height:wonderBlocksTokens.spacing.xxxxSmall_2,boxShadow:`inset 0px -1px 0px ${wonderBlocksTokens.color.offBlack8}`}},horizontalRuleInset:{":after":{width:`calc(100% - ${CellMeasurements.cellPadding.paddingHorizontal}px)`}}});
+var themeDefault = {root:{border:{width:{default:wonderBlocksTokens.border.width.medium,selected:wonderBlocksTokens.border.width.thick},radius:{default:wonderBlocksTokens.border.radius.radius_0,focus:wonderBlocksTokens.border.radius.radius_040,press:wonderBlocksTokens.border.radius.radius_0,focusPress:wonderBlocksTokens.border.radius.radius_040}},color:{press:{border:wonderBlocksTokens.semanticColor.core.border.instructive.default},selected:{foreground:wonderBlocksTokens.semanticColor.core.foreground.instructive.default,border:wonderBlocksTokens.semanticColor.core.border.instructive.default}},layout:{gap:{default:wonderBlocksTokens.sizing.size_160,detail:wonderBlocksTokens.sizing.size_020},padding:{block:{default:wonderBlocksTokens.sizing.size_120,detail:wonderBlocksTokens.sizing.size_160},inline:{default:wonderBlocksTokens.sizing.size_160,detail:wonderBlocksTokens.sizing.size_160}}},sizing:{minHeight:wonderBlocksTokens.sizing.size_480}},accessoryLeft:{color:{default:{foreground:"inherit"}}},accessoryRight:{color:{default:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.default},selected:{foreground:wonderBlocksTokens.semanticColor.core.foreground.instructive.subtle},disabled:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong}}},rule:{sizing:{height:wonderBlocksTokens.sizing.size_020},shadow:`inset 0px -1px 0px ${wonderBlocksTokens.semanticColor.core.border.inverse.default}`},title:{font:{lineHeight:wonderBlocksTokens.font.body.lineHeight.medium}},subtitle:{color:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.default},font:{size:wonderBlocksTokens.font.body.size.small,lineHeight:wonderBlocksTokens.font.body.lineHeight.small}}};
 
-const LeftAccessory=({leftAccessory,leftAccessoryStyle,disabled})=>{if(!leftAccessory){return null}return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,disabled&&styles$1.accessoryDisabled,{...leftAccessoryStyle}],children:leftAccessory}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:CellMeasurements.accessoryHorizontalSpacing})]})};const RightAccessory=({rightAccessory,rightAccessoryStyle,active,disabled})=>{if(!rightAccessory){return null}return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:CellMeasurements.accessoryHorizontalSpacing}),jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...rightAccessoryStyle},active&&styles$1.accessoryActive],children:rightAccessory})]})};function CellInner(props){const{active,children,disabled,horizontalRule="inset",contentStyle=undefined,leftAccessory=undefined,leftAccessoryStyle=undefined,rightAccessory=undefined,rightAccessoryStyle=undefined,style,testId,innerStyle}=props;const horizontalRuleStyles=getHorizontalRuleStyles(horizontalRule);return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles$1.innerWrapper,innerStyle,style,horizontalRuleStyles,active&&styles$1.activeInnerWrapper],className:"inner-wrapper",children:[jsxRuntime.jsx(LeftAccessory,{leftAccessory:leftAccessory,leftAccessoryStyle:leftAccessoryStyle,disabled:disabled}),jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.content,contentStyle],testId:testId,children:children}),jsxRuntime.jsx(RightAccessory,{rightAccessory:rightAccessory,rightAccessoryStyle:rightAccessoryStyle,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,rootStyle}=props;if(onClick||href){return jsxRuntime.jsx(Clickable__default["default"],{disabled:disabled,onClick:onClick,href:href,hideDefaultFocusRing:true,"aria-label":ariaLabel?ariaLabel:undefined,"aria-selected":ariaSelected?ariaSelected:undefined,"aria-checked":ariaChecked,role:role,target:target,style:[styles$1.wrapper,styles$1.clickable,rootStyle,active&&styles$1.active,disabled&&styles$1.disabled],"aria-current":active?"true":undefined,children:()=>jsxRuntime.jsx(CellInner,{...props})})}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.wrapper,rootStyle,active&&styles$1.active],"aria-current":active?"true":undefined,role:role,children:jsxRuntime.jsx(CellInner,{...props})})};const cellTokens={root:{default:{background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.text.primary},hover:{background:wonderBlocksTokens.color.fadedBlue8},press:{background:wonderBlocksTokens.color.fadedBlue8,border:wonderBlocksTokens.semanticColor.surface.emphasis},selected:{background:wonderBlocksTokens.color.fadedBlue8,foreground:wonderBlocksTokens.color.activeBlue,border:wonderBlocksTokens.semanticColor.surface.emphasis},focus:{border:wonderBlocksTokens.semanticColor.focus.outer},disabled:{foreground:wonderBlocksTokens.semanticColor.text.disabled,border:wonderBlocksTokens.semanticColor.focus.outer}},accessory:{default:{foreground:wonderBlocksTokens.semanticColor.icon.primary},selected:{foreground:wonderBlocksTokens.semanticColor.icon.action},disabled:{foreground:wonderBlocksTokens.semanticColor.icon.secondary}}};const styles$1=aphrodite.StyleSheet.create({wrapper:{background:cellTokens.root.default.background,color:cellTokens.root.default.foreground,display:"flex",minHeight:CellMeasurements.cellMinHeight,textAlign:"left",width:"100%"},innerWrapper:{minHeight:CellMeasurements.cellMinHeight,padding:`${CellMeasurements.cellPadding.paddingVertical}px ${CellMeasurements.cellPadding.paddingHorizontal}px`,flexDirection:"row",flex:1,borderRadius:"inherit",overflow:"hidden",height:"100%",":focus-visible":{padding:`${CellMeasurements.cellPadding.paddingVertical-2}px ${CellMeasurements.cellPadding.paddingHorizontal-2}px`}},activeInnerWrapper:{position:"relative",":before":{content:"''",position:"absolute",top:0,left:0,bottom:0,width:wonderBlocksTokens.border.width.thick,backgroundColor:cellTokens.root.selected.border}},content:{alignSelf:"center",flex:1,overflowWrap:"break-word"},accessory:{minWidth:"auto",alignItems:"center",alignSelf:"center"},accessoryRight:{color:cellTokens.accessory.default.foreground},clickable:{outline:"none",[":hover[aria-disabled=true]"]:{cursor:"not-allowed"},":focus-visible":{borderRadius:wonderBlocksTokens.border.radius.radius_040,overflow:"hidden",position:"relative"},[":focus-visible:after"]:{content:"''",position:"absolute",top:0,left:0,zIndex:1,width:`calc(100% - ${wonderBlocksTokens.spacing.xxxSmall_4}px)`,height:`calc(100% - ${wonderBlocksTokens.spacing.xxxSmall_4}px)`,border:`${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${cellTokens.root.focus.border}`,borderRadius:wonderBlocksTokens.border.radius.radius_040},[":focus-visible[aria-disabled=true]:after"]:{borderColor:cellTokens.root.disabled.border},[":hover[aria-disabled=false]"]:{background:cellTokens.root.hover.background},[":active[aria-disabled=false]"]:{background:cellTokens.root.press.background},[":active[aria-disabled=false]:not([aria-current=true]) .inner-wrapper"]:{position:"relative",":before":{content:"''",position:"absolute",top:0,left:0,bottom:0,width:wonderBlocksTokens.border.width.medium,backgroundColor:wonderBlocksTokens.semanticColor.surface.emphasis}}},active:{background:cellTokens.root.selected.background,color:cellTokens.root.selected.foreground,cursor:"default"},disabled:{color:cellTokens.root.disabled.foreground,":focus-visible":{outline:"none"}},accessoryActive:{color:cellTokens.accessory.selected.foreground},accessoryDisabled:{color:cellTokens.accessory.disabled.foreground,opacity:.32}});
+var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-cell-");
 
-const CompactCell=function(props){const{title,...coreProps}=props;return jsxRuntime.jsx(CellCore,{...coreProps,children:typeof title==="string"?jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{children:title}):title})};
+const getHorizontalRuleStyles=horizontalRule=>{switch(horizontalRule){case"inset":return [styles$2.horizontalRule,styles$2.horizontalRuleInset];case"full-width":return styles$2.horizontalRule;case"none":return {}}};const styles$2=aphrodite.StyleSheet.create({horizontalRule:{position:"relative",":after":{width:"100%",content:"''",position:"absolute",bottom:0,right:0,height:theme.rule.sizing.height,boxShadow:theme.rule.shadow}},horizontalRuleInset:{":after":{width:`calc(100% - ${theme.root.layout.padding.inline.default})`}}});
 
-const Subtitle=({subtitle,disabled})=>{if(!subtitle){return null}if(typeof subtitle==="string"){return jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:!disabled&&styles.subtitle,children:subtitle})}return subtitle};const DetailCell=function(props){const{title,subtitle1,subtitle2,...coreProps}=props;return jsxRuntime.jsxs(CellCore,{...coreProps,innerStyle:styles.innerWrapper,children:[jsxRuntime.jsx(Subtitle,{subtitle:subtitle1,disabled:coreProps.disabled}),subtitle1&&jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxxSmall_2}),typeof title==="string"?jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{children:title}):title,subtitle2&&jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxxSmall_2}),jsxRuntime.jsx(Subtitle,{subtitle:subtitle2,disabled:coreProps.disabled})]})};const styles=aphrodite.StyleSheet.create({subtitle:{color:wonderBlocksTokens.semanticColor.text.secondary},innerWrapper:{padding:`${CellMeasurements.detailCellPadding.paddingVertical}px ${CellMeasurements.detailCellPadding.paddingHorizontal}px`}});
+const LeftAccessory=({leftAccessory,leftAccessoryStyle,disabled})=>{if(!leftAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...leftAccessoryStyle}],children:leftAccessory})};const RightAccessory=({rightAccessory,rightAccessoryStyle,active,disabled})=>{if(!rightAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...rightAccessoryStyle},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,leftAccessoryStyle=undefined,rightAccessory=undefined,rightAccessoryStyle=undefined,testId}=props;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(LeftAccessory,{leftAccessory:leftAccessory,leftAccessoryStyle:leftAccessoryStyle,disabled:disabled}),jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.content,contentStyle],testId:testId,children:children}),jsxRuntime.jsx(RightAccessory,{rightAccessory:rightAccessory,rightAccessoryStyle:rightAccessoryStyle,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,horizontalRule="inset",style,innerStyle}=props;const horizontalRuleStyles=getHorizontalRuleStyles(horizontalRule);const sharedStyles=[styles$1.wrapper,innerStyle,active&&styles$1.active,horizontalRuleStyles];if(onClick||href){return jsxRuntime.jsx(Clickable__default["default"],{disabled:disabled,onClick:onClick,href:href,hideDefaultFocusRing:true,"aria-label":ariaLabel?ariaLabel:undefined,"aria-selected":ariaSelected?ariaSelected:undefined,"aria-checked":ariaChecked,role:role,target:target,style:[sharedStyles,styles$1.clickable,disabled&&styles$1.disabled,style],"aria-current":active?"true":undefined,tabIndex:tabIndex,children:()=>jsxRuntime.jsx(CellInner,{...props})})}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[sharedStyles,style],"aria-current":active?"true":undefined,role:role,children:jsxRuntime.jsx(CellInner,{...props})})};const styles$1=aphrodite.StyleSheet.create({wrapper:{background:wonderBlocksTokens.semanticColor.surface.primary,borderRadius:theme.root.border.radius.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,minHeight:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"left",width:"100%",display:"flex",flex:1,flexDirection:"row",gap:theme.root.layout.gap.default,paddingBlock:theme.root.layout.padding.block.default,paddingInline:theme.root.layout.padding.inline.default},content:{alignSelf:"center",flex:1,overflowWrap:"break-word"},accessory:{minWidth:"auto",alignItems:"center",alignSelf:"center"},accessoryLeft:{color:theme.accessoryLeft.color.default.foreground},accessoryRight:{color:theme.accessoryRight.color.default.foreground},clickable:{":hover":{background:wonderBlocksTokens.semanticColor.core.background.instructive.subtle},":active":{background:wonderBlocksTokens.semanticColor.core.background.instructive.subtle,borderRadius:theme.root.border.radius.press},":focus-visible":{borderRadius:theme.root.border.radius.focus,outline:wonderBlocksStyles.focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${theme.root.border.width.default} * -1)`,boxShadow:`inset 0 0 0 calc(${wonderBlocksTokens.border.width.medium}*2) ${wonderBlocksTokens.semanticColor.focus.inner}`,overflow:"hidden",position:"relative",[":after"]:{content:"unset"}},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.focusPress},[":active[aria-disabled=false]:not([aria-current=true])"]:{position:"relative",":before":{content:"''",position:"absolute",top:0,left:0,bottom:0,width:theme.root.border.width.default,backgroundColor:theme.root.color.press.border}}},active:{background:wonderBlocksTokens.semanticColor.core.background.instructive.subtle,color:theme.root.color.selected.foreground,cursor:"default",position:"relative",":before":{content:"''",position:"absolute",top:0,left:0,bottom:0,width:theme.root.border.width.selected,backgroundColor:theme.root.color.selected.border}},disabled:{background:wonderBlocksTokens.semanticColor.surface.primary,borderRadius:theme.root.border.radius.default,color:wonderBlocksTokens.semanticColor.core.foreground.inverse.subtle,":hover":{background:wonderBlocksTokens.semanticColor.surface.primary,cursor:"not-allowed"},":active":{background:wonderBlocksTokens.semanticColor.surface.primary,borderRadius:theme.root.border.radius.default},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.default}},accessoryActive:{color:theme.accessoryRight.color.selected.foreground},accessoryDisabled:{color:theme.accessoryRight.color.disabled.foreground,opacity:.32}});
+
+const CompactCell=function(props){const{title,...coreProps}=props;return jsxRuntime.jsx(CellCore,{...coreProps,children:typeof title==="string"?jsxRuntime.jsx(wonderBlocksTypography.BodyText,{weight:"semi",style:{lineHeight:theme.title.font.lineHeight},children:title}):title})};
+
+const Subtitle=({subtitle,disabled})=>{if(!subtitle){return null}if(typeof subtitle==="string"){return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",tag:"span",style:[!disabled&&styles.subtitle,{fontSize:theme.subtitle.font.size,lineHeight:theme.subtitle.font.lineHeight}],children:subtitle})}return subtitle};const DetailCell=function(props){const{contentStyle,title,subtitle1,subtitle2,...coreProps}=props;return jsxRuntime.jsxs(CellCore,{...coreProps,innerStyle:styles.innerWrapper,contentStyle:{gap:theme.root.layout.gap.detail,...contentStyle},children:[jsxRuntime.jsx(Subtitle,{subtitle:subtitle1,disabled:coreProps.disabled}),typeof title==="string"?jsxRuntime.jsx(wonderBlocksTypography.BodyText,{weight:"semi",style:{lineHeight:theme.title.font.lineHeight},children:title}):title,jsxRuntime.jsx(Subtitle,{subtitle:subtitle2,disabled:coreProps.disabled})]})};const styles=aphrodite.StyleSheet.create({subtitle:{color:theme.subtitle.color.foreground},innerWrapper:{paddingBlock:theme.root.layout.padding.block.detail,paddingInline:theme.root.layout.padding.inline.detail}});
 
 exports.CompactCell = CompactCell;
 exports.DetailCell = DetailCell;

package/dist/theme/default.d.ts

@@ -0,0 +1,85 @@
+declare const _default: {
+    root: {
+        border: {
+            width: {
+                default: string;
+                selected: string;
+            };
+            radius: {
+                default: string;
+                focus: string;
+                press: string;
+                focusPress: string;
+            };
+        };
+        color: {
+            press: {
+                border: string;
+            };
+            selected: {
+                foreground: string;
+                border: string;
+            };
+        };
+        layout: {
+            gap: {
+                default: string;
+                detail: string;
+            };
+            padding: {
+                block: {
+                    default: string;
+                    detail: string;
+                };
+                inline: {
+                    default: string;
+                    detail: string;
+                };
+            };
+        };
+        sizing: {
+            minHeight: string;
+        };
+    };
+    accessoryLeft: {
+        color: {
+            default: {
+                foreground: string;
+            };
+        };
+    };
+    accessoryRight: {
+        color: {
+            default: {
+                foreground: string;
+            };
+            selected: {
+                foreground: string;
+            };
+            disabled: {
+                foreground: string;
+            };
+        };
+    };
+    rule: {
+        sizing: {
+            height: string;
+        };
+        shadow: string;
+    };
+    title: {
+        font: {
+            lineHeight: string;
+        };
+    };
+    subtitle: {
+        color: {
+            foreground: string;
+        };
+        font: {
+            size: string;
+            lineHeight: string;
+        };
+    };
+};
+export default _default;

package/dist/theme/index.d.ts

@@ -0,0 +1,85 @@
+declare const _default: {
+    root: {
+        border: {
+            width: {
+                default: string;
+                selected: string;
+            };
+            radius: {
+                default: string;
+                focus: string;
+                press: string;
+                focusPress: string;
+            };
+        };
+        color: {
+            press: {
+                border: string;
+            };
+            selected: {
+                foreground: string;
+                border: string;
+            };
+        };
+        layout: {
+            gap: {
+                default: string;
+                detail: string;
+            };
+            padding: {
+                block: {
+                    default: string;
+                    detail: string;
+                };
+                inline: {
+                    default: string;
+                    detail: string;
+                };
+            };
+        };
+        sizing: {
+            minHeight: string;
+        };
+    };
+    accessoryLeft: {
+        color: {
+            default: {
+                foreground: string;
+            };
+        };
+    };
+    accessoryRight: {
+        color: {
+            default: {
+                foreground: string;
+            };
+            selected: {
+                foreground: string;
+            };
+            disabled: {
+                foreground: string;
+            };
+        };
+    };
+    rule: {
+        sizing: {
+            height: string;
+        };
+        shadow: string;
+    };
+    title: {
+        font: {
+            lineHeight: string;
+        };
+    };
+    subtitle: {
+        color: {
+            foreground: string;
+        };
+        font: {
+            size: string;
+            lineHeight: string;
+        };
+    };
+};
+export default _default;

package/dist/theme/thunderblocks.d.ts

@@ -0,0 +1,85 @@
+declare const _default: {
+    root: {
+        border: {
+            width: {
+                default: string;
+                selected: string;
+            };
+            radius: {
+                default: string;
+                focus: string;
+                press: string;
+                focusPress: string;
+            };
+        };
+        color: {
+            press: {
+                border: string;
+            };
+            selected: {
+                foreground: string;
+                border: string;
+            };
+        };
+        layout: {
+            gap: {
+                default: string;
+                detail: string;
+            };
+            padding: {
+                block: {
+                    default: string;
+                    detail: string;
+                };
+                inline: {
+                    default: string;
+                    detail: string;
+                };
+            };
+        };
+        sizing: {
+            minHeight: string;
+        };
+    };
+    accessoryLeft: {
+        color: {
+            default: {
+                foreground: string;
+            };
+        };
+    };
+    accessoryRight: {
+        color: {
+            default: {
+                foreground: string;
+            };
+            selected: {
+                foreground: string;
+            };
+            disabled: {
+                foreground: string;
+            };
+        };
+    };
+    rule: {
+        sizing: {
+            height: string;
+        };
+        shadow: string;
+    };
+    title: {
+        font: {
+            lineHeight: string;
+        };
+    };
+    subtitle: {
+        color: {
+            foreground: string;
+        };
+        font: {
+            size: string;
+            lineHeight: string;
+        };
+    };
+};
+export default _default;

package/dist/util/types.d.ts

@@ -27,6 +27,10 @@ export type AccessoryStyle = {
      * To horizontally align the accessory.
      */
     alignItems?: "flex-start" | "flex-end" | "center";
+    /**
+     * To set spacing between child elements.
+     */
+    gap?: number | string;
 };
 /**
  * A union that allows using  plain text or WB Typography elements.
@@ -90,13 +94,6 @@ export type CellProps = {
      * A custom role for the cell.
      */
     role?: ClickableRole;
-    /**
-     * Optional custom styles applied to the top node.
-     *
-     * _NOTE:_ This is the top node of the cell, not the cell container. If
-     * possible, try to use this prop carefully and use `style` instead.
-     */
-    rootStyle?: StyleType;
     /**
      * Optional custom styles applied to the cell container.
      */
@@ -144,5 +141,9 @@ export type CellProps = {
      * TODO(WB-1262): only allow this prop when `href` is also set.t
      */
     target?: "_blank";
+    /**
+     * Set the tabindex attribute on the rendered element.
+     */
+    tabIndex?: number;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "4.1.24",
+  "version": "5.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -9,12 +9,20 @@
   "main": "dist/index.js",
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/es/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/css/vars.css"
+  },
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "7.1.10",
+    "@khanacademy/wonder-blocks-clickable": "7.1.12",
     "@khanacademy/wonder-blocks-core": "12.3.0",
-    "@khanacademy/wonder-blocks-layout": "3.1.21",
-    "@khanacademy/wonder-blocks-tokens": "11.1.1",
-    "@khanacademy/wonder-blocks-typography": "4.2.6"
+    "@khanacademy/wonder-blocks-styles": "0.2.19",
+    "@khanacademy/wonder-blocks-tokens": "11.2.1",
+    "@khanacademy/wonder-blocks-typography": "4.2.8"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -26,6 +34,7 @@
   "author": "",
   "license": "MIT",
   "scripts": {
+    "build:css": "pnpm exec wonder-blocks-tokens .",
     "test": "echo \"Error: no test specified\" && exit 1"
   }
 }