@khanacademy/wonder-blocks-cell 6.1.7 → 6.1.8

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 +11 -0
  3. package/dist/css/vars.css +1 -3
  4. package/dist/es/index.js +2 -2
  5. package/dist/index.js +2 -2
  6. package/dist/theme/default.d.ts +0 -3
  7. package/dist/theme/index.d.ts +0 -3
  8. package/dist/theme/thunderblocks.d.ts +0 -3
  9. package/package.json +5 -5
package/.turbo/turbo-build$colon$css.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @khanacademy/wonder-blocks-cell@6.1.7 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-cell
2
+ > @khanacademy/wonder-blocks-cell@6.1.8 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-cell
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-cell/dist/css
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @khanacademy/wonder-blocks-cell
2
2
 
3
+ ## 6.1.8
4
+
5
+ ### Patch Changes
6
+
7
+ - 8bb7ada: Update color tokens to use semanticColor.core.foreground.instructive changes
8
+ - Updated dependencies [8bb7ada]
9
+ - @khanacademy/wonder-blocks-tokens@15.0.0
10
+ - @khanacademy/wonder-blocks-clickable@8.1.2
11
+ - @khanacademy/wonder-blocks-styles@0.2.38
12
+ - @khanacademy/wonder-blocks-typography@4.2.29
13
+
3
14
  ## 6.1.7
4
15
 
5
16
  ### Patch Changes
package/dist/css/vars.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --wb-c-cell-root-border-radius-press: var(--wb-border-radius-radius_0);
6
6
  --wb-c-cell-root-border-radius-focusPress: var(--wb-border-radius-radius_040);
7
7
  --wb-c-cell-root-color-press-border: var(--wb-semanticColor-core-border-instructive-default);
8
- --wb-c-cell-root-color-selected-foreground: var(--wb-semanticColor-core-foreground-instructive-default);
8
+ --wb-c-cell-root-color-selected-foreground: var(--wb-semanticColor-core-foreground-instructive-strong);
9
9
  --wb-c-cell-root-color-selected-border: var(--wb-semanticColor-core-border-instructive-default);
10
10
  --wb-c-cell-root-color-disabled-foreground: var(--wb-semanticColor-core-foreground-disabled-default);
11
11
  --wb-c-cell-root-layout-gap-default: var(--wb-sizing-size_160);
@@ -17,7 +17,6 @@
17
17
  --wb-c-cell-root-sizing-minHeight: var(--wb-sizing-size_480);
18
18
  --wb-c-cell-accessoryLeft-color-default-foreground: inherit;
19
19
  --wb-c-cell-accessoryRight-color-default-foreground: var(--wb-semanticColor-core-foreground-neutral-default);
20
- --wb-c-cell-accessoryRight-color-selected-foreground: var(--wb-semanticColor-core-foreground-instructive-subtle);
21
20
  --wb-c-cell-accessoryRight-color-disabled-foreground: var(--wb-semanticColor-core-foreground-neutral-strong);
22
21
  --wb-c-cell-rule-sizing-height: var(--wb-sizing-size_020);
23
22
  --wb-c-cell-rule-shadow: inset 0px -1px 0px var(--wb-semanticColor-core-border-neutral-subtle);
@@ -44,7 +43,6 @@
44
43
  --wb-c-cell-root-sizing-minHeight: var(--wb-sizing-size_440);
45
44
  --wb-c-cell-accessoryLeft-color-default-foreground: var(--wb-semanticColor-core-foreground-neutral-subtle);
46
45
  --wb-c-cell-accessoryRight-color-default-foreground: var(--wb-semanticColor-core-foreground-neutral-subtle);
47
- --wb-c-cell-accessoryRight-color-selected-foreground: var(--wb-semanticColor-core-foreground-instructive-default);
48
46
  --wb-c-cell-accessoryRight-color-disabled-foreground: var(--wb-semanticColor-core-foreground-neutral-strong);
49
47
  --wb-c-cell-rule-sizing-height: var(--wb-sizing-size_0);
50
48
  --wb-c-cell-rule-shadow: none;
package/dist/es/index.js CHANGED
@@ -7,13 +7,13 @@ import { View } from '@khanacademy/wonder-blocks-core';
7
7
  import { border, semanticColor, sizing, font, mapValuesToCssVars } from '@khanacademy/wonder-blocks-tokens';
8
8
  import { focusStyles } from '@khanacademy/wonder-blocks-styles';
9
9
 
10
- 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},disabled:{foreground:semanticColor.core.foreground.disabled.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.neutral.subtle}`},title:{font:{lineHeight:font.body.lineHeight.medium}},subtitle:{font:{size:font.body.size.small,lineHeight:font.body.lineHeight.small}}};
10
+ 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.strong,border:semanticColor.core.border.instructive.default},disabled:{foreground:semanticColor.core.foreground.disabled.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},disabled:{foreground:semanticColor.core.foreground.neutral.strong}}},rule:{sizing:{height:sizing.size_020},shadow:`inset 0px -1px 0px ${semanticColor.core.border.neutral.subtle}`},title:{font:{lineHeight:font.body.lineHeight.medium}},subtitle:{font:{size:font.body.size.small,lineHeight:font.body.lineHeight.small}}};
11
11
 
12
12
  var theme = mapValuesToCssVars(themeDefault,"--wb-c-cell-");
13
13
 
14
14
  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})`}}});
15
15
 
16
- const LeftAccessory=({leftAccessory,style,disabled})=>{if(!leftAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...style}],children:leftAccessory})};const RightAccessory=({rightAccessory,style,active,disabled})=>{if(!rightAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...style},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,rightAccessory=undefined,styles:stylesProp,testId}=props;return jsxs(Fragment,{children:[jsx(LeftAccessory,{leftAccessory:leftAccessory,style:stylesProp?.leftAccessory,disabled:disabled}),jsx(View,{style:[styles$1.content,contentStyle,stylesProp?.content],testId:testId,children:children}),jsx(RightAccessory,{rightAccessory:rightAccessory,style:stylesProp?.rightAccessory,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,id,horizontalRule="inset",styles:stylesProp,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,stylesProp?.root],"aria-current":active?"true":undefined,tabIndex:tabIndex,id:id,children:()=>jsx(CellInner,{...props})})}return jsx(View,{style:[sharedStyles,stylesProp?.root],"aria-current":active?"true":undefined,role:role,id:id,children:jsx(CellInner,{...props})})};const styles$1=StyleSheet.create({wrapper:{background:semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:semanticColor.core.foreground.neutral.strong,minHeight:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"start",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.core.background.base.default,borderRadius:theme.root.border.radius.default,color:theme.root.color.disabled.foreground,":hover":{background:semanticColor.core.background.base.default,cursor:"not-allowed"},":active":{background:semanticColor.core.background.base.default,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}});
16
+ const LeftAccessory=({leftAccessory,style,disabled})=>{if(!leftAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...style}],children:leftAccessory})};const RightAccessory=({rightAccessory,style,active,disabled})=>{if(!rightAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...style},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,rightAccessory=undefined,styles:stylesProp,testId}=props;return jsxs(Fragment,{children:[jsx(LeftAccessory,{leftAccessory:leftAccessory,style:stylesProp?.leftAccessory,disabled:disabled}),jsx(View,{style:[styles$1.content,contentStyle,stylesProp?.content],testId:testId,children:children}),jsx(RightAccessory,{rightAccessory:rightAccessory,style:stylesProp?.rightAccessory,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,id,horizontalRule="inset",styles:stylesProp,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,stylesProp?.root],"aria-current":active?"true":undefined,tabIndex:tabIndex,id:id,children:()=>jsx(CellInner,{...props})})}return jsx(View,{style:[sharedStyles,stylesProp?.root],"aria-current":active?"true":undefined,role:role,id:id,children:jsx(CellInner,{...props})})};const styles$1=StyleSheet.create({wrapper:{background:semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:semanticColor.core.foreground.neutral.strong,minHeight:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"start",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.core.background.base.default,borderRadius:theme.root.border.radius.default,color:theme.root.color.disabled.foreground,":hover":{background:semanticColor.core.background.base.default,cursor:"not-allowed"},":active":{background:semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.default}},accessoryActive:{color:semanticColor.core.foreground.instructive.default},accessoryDisabled:{color:theme.accessoryRight.color.disabled.foreground,opacity:.32}});
17
17
 
18
18
  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})};
19
19
 
package/dist/index.js CHANGED
@@ -15,13 +15,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
15
15
 
16
16
  var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
17
17
 
18
- 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},disabled:{foreground:wonderBlocksTokens.semanticColor.core.foreground.disabled.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.neutral.subtle}`},title:{font:{lineHeight:wonderBlocksTokens.font.body.lineHeight.medium}},subtitle:{font:{size:wonderBlocksTokens.font.body.size.small,lineHeight:wonderBlocksTokens.font.body.lineHeight.small}}};
18
+ 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.strong,border:wonderBlocksTokens.semanticColor.core.border.instructive.default},disabled:{foreground:wonderBlocksTokens.semanticColor.core.foreground.disabled.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},disabled:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong}}},rule:{sizing:{height:wonderBlocksTokens.sizing.size_020},shadow:`inset 0px -1px 0px ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`},title:{font:{lineHeight:wonderBlocksTokens.font.body.lineHeight.medium}},subtitle:{font:{size:wonderBlocksTokens.font.body.size.small,lineHeight:wonderBlocksTokens.font.body.lineHeight.small}}};
19
19
 
20
20
  var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-cell-");
21
21
 
22
22
  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})`}}});
23
23
 
24
- const LeftAccessory=({leftAccessory,style,disabled})=>{if(!leftAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...style}],children:leftAccessory})};const RightAccessory=({rightAccessory,style,active,disabled})=>{if(!rightAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...style},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,rightAccessory=undefined,styles:stylesProp,testId}=props;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(LeftAccessory,{leftAccessory:leftAccessory,style:stylesProp?.leftAccessory,disabled:disabled}),jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.content,contentStyle,stylesProp?.content],testId:testId,children:children}),jsxRuntime.jsx(RightAccessory,{rightAccessory:rightAccessory,style:stylesProp?.rightAccessory,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,id,horizontalRule="inset",styles:stylesProp,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,stylesProp?.root],"aria-current":active?"true":undefined,tabIndex:tabIndex,id:id,children:()=>jsxRuntime.jsx(CellInner,{...props})})}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[sharedStyles,stylesProp?.root],"aria-current":active?"true":undefined,role:role,id:id,children:jsxRuntime.jsx(CellInner,{...props})})};const styles$1=aphrodite.StyleSheet.create({wrapper:{background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,minHeight:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"start",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.core.background.base.default,borderRadius:theme.root.border.radius.default,color:theme.root.color.disabled.foreground,":hover":{background:wonderBlocksTokens.semanticColor.core.background.base.default,cursor:"not-allowed"},":active":{background:wonderBlocksTokens.semanticColor.core.background.base.default,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}});
24
+ const LeftAccessory=({leftAccessory,style,disabled})=>{if(!leftAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...style}],children:leftAccessory})};const RightAccessory=({rightAccessory,style,active,disabled})=>{if(!rightAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...style},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,rightAccessory=undefined,styles:stylesProp,testId}=props;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(LeftAccessory,{leftAccessory:leftAccessory,style:stylesProp?.leftAccessory,disabled:disabled}),jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.content,contentStyle,stylesProp?.content],testId:testId,children:children}),jsxRuntime.jsx(RightAccessory,{rightAccessory:rightAccessory,style:stylesProp?.rightAccessory,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,id,horizontalRule="inset",styles:stylesProp,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,stylesProp?.root],"aria-current":active?"true":undefined,tabIndex:tabIndex,id:id,children:()=>jsxRuntime.jsx(CellInner,{...props})})}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[sharedStyles,stylesProp?.root],"aria-current":active?"true":undefined,role:role,id:id,children:jsxRuntime.jsx(CellInner,{...props})})};const styles$1=aphrodite.StyleSheet.create({wrapper:{background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,minHeight:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"start",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.core.background.base.default,borderRadius:theme.root.border.radius.default,color:theme.root.color.disabled.foreground,":hover":{background:wonderBlocksTokens.semanticColor.core.background.base.default,cursor:"not-allowed"},":active":{background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.default}},accessoryActive:{color:wonderBlocksTokens.semanticColor.core.foreground.instructive.default},accessoryDisabled:{color:theme.accessoryRight.color.disabled.foreground,opacity:.32}});
25
25
 
26
26
  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})};
27
27
 
package/dist/theme/default.d.ts CHANGED
@@ -56,9 +56,6 @@ declare const _default: {
56
56
  default: {
57
57
  foreground: string;
58
58
  };
59
- selected: {
60
- foreground: string;
61
- };
62
59
  disabled: {
63
60
  foreground: string;
64
61
  };
package/dist/theme/index.d.ts CHANGED
@@ -56,9 +56,6 @@ declare const _default: {
56
56
  default: {
57
57
  foreground: string;
58
58
  };
59
- selected: {
60
- foreground: string;
61
- };
62
59
  disabled: {
63
60
  foreground: string;
64
61
  };
package/dist/theme/thunderblocks.d.ts CHANGED
@@ -56,9 +56,6 @@ declare const _default: {
56
56
  default: {
57
57
  foreground: string;
58
58
  };
59
- selected: {
60
- foreground: string;
61
- };
62
59
  disabled: {
63
60
  foreground: string;
64
61
  };
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "",
4
4
  "author": "Khan Academy",
5
5
  "license": "MIT",
6
- "version": "6.1.7",
6
+ "version": "6.1.8",
7
7
  "publishConfig": {
8
8
  "access": "public"
9
9
  },
@@ -28,11 +28,11 @@
28
28
  "./styles.css": "./dist/css/vars.css"
29
29
  },
30
30
  "dependencies": {
31
- "@khanacademy/wonder-blocks-clickable": "8.1.1",
31
+ "@khanacademy/wonder-blocks-clickable": "8.1.2",
32
32
  "@khanacademy/wonder-blocks-core": "12.4.3",
33
- "@khanacademy/wonder-blocks-styles": "0.2.37",
34
- "@khanacademy/wonder-blocks-tokens": "14.1.3",
35
- "@khanacademy/wonder-blocks-typography": "4.2.28"
33
+ "@khanacademy/wonder-blocks-styles": "0.2.38",
34
+ "@khanacademy/wonder-blocks-tokens": "15.0.0",
35
+ "@khanacademy/wonder-blocks-typography": "4.2.29"
36
36
  },
37
37
  "peerDependencies": {
38
38
  "aphrodite": "^1.2.5",