@khanacademy/wonder-blocks-accordion 3.1.37 → 3.1.39

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @khanacademy/wonder-blocks-accordion
 
+## 3.1.39
+
+### Patch Changes
+
+- Updated dependencies [ede6085]
+- Updated dependencies [a70f274]
+    - @khanacademy/wonder-blocks-tokens@13.0.0
+    - @khanacademy/wonder-blocks-clickable@7.1.25
+    - @khanacademy/wonder-blocks-icon@5.2.19
+    - @khanacademy/wonder-blocks-typography@4.2.21
+
+## 3.1.38
+
+### Patch Changes
+
+- 1feec01: Replace use of `surface` tokens in components in favour of `background` tokens
+- Updated dependencies [1feec01]
+    - @khanacademy/wonder-blocks-tokens@12.2.1
+    - @khanacademy/wonder-blocks-clickable@7.1.24
+    - @khanacademy/wonder-blocks-icon@5.2.18
+    - @khanacademy/wonder-blocks-typography@4.2.20
+
 ## 3.1.37
 
 ### Patch Changes

package/dist/es/index.js

@@ -15,6 +15,6 @@ function getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expan
 
 const AccordionSectionHeader=React.forwardRef(function AccordionSectionHeader(props,ref){const{id,header,caretPosition,cornerKind,collapsible=true,expanded,animated,onClick,sectionContentUniqueId,headerStyle,tag="h2",testId,isFirstSection,isLastSection}=props;const headerIsString=typeof header==="string";const{roundedTop,roundedBottom}=getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expanded);return jsx(HeadingSmall,{tag:tag,style:styles$1.heading,children:jsx(Clickable,{id:id,"aria-expanded":expanded,"aria-controls":sectionContentUniqueId,onClick:onClick,disabled:!collapsible,testId:testId?`${testId}-header`:undefined,style:[styles$1.headerWrapper,animated&&styles$1.headerWrapperWithAnimation,caretPosition==="start"&&styles$1.headerWrapperCaretStart,roundedTop&&styles$1.roundedTop,roundedBottom&&styles$1.roundedBottom,headerStyle,!collapsible&&styles$1.disabled],ref:ref,children:()=>jsxs(Fragment,{children:[jsx(View,{style:[styles$1.headerContent,headerIsString&&styles$1.headerString],children:headerIsString?jsx(View,{style:[caretPosition==="end"?styles$1.headerStringCaretEnd:styles$1.headerStringCaretStart],children:header}):header}),collapsible&&jsx(PhosphorIcon,{icon:caretDown,color:semanticColor.core.foreground.neutral.default,size:"small",style:[animated&&styles$1.iconWithAnimation,caretPosition==="start"?styles$1.iconStart:styles$1.iconEnd,expanded&&styles$1.iconExpanded],testId:testId?`${testId}-caret-icon`:undefined})]})})})});const INNER_BORDER_RADIUS=spacing.small_12-1;const ANIMATION_LENGTH="300ms";const styles$1=StyleSheet.create({heading:{minWidth:0,marginTop:0},headerWrapper:{display:"flex",flexDirection:"row",alignItems:"center",overflow:"hidden",minWidth:"auto",width:"100%",position:"relative",zIndex:1,":active":{outline:`2px solid ${semanticColor.action.secondary.progressive.press.border}`},":hover":{outline:`2px solid ${semanticColor.action.secondary.progressive.hover.border}`},":focus-visible":{outline:`2px solid ${semanticColor.focus.outer}`}},headerWrapperWithAnimation:{transition:`border-radius ${ANIMATION_LENGTH}`},headerWrapperCaretStart:{flexDirection:"row-reverse"},roundedTop:{borderStartStartRadius:INNER_BORDER_RADIUS,borderStartEndRadius:INNER_BORDER_RADIUS},roundedBottom:{borderEndStartRadius:INNER_BORDER_RADIUS,borderEndEndRadius:INNER_BORDER_RADIUS},headerContent:{flexGrow:1,textAlign:"start"},headerString:{paddingTop:spacing.medium_16,paddingBottom:spacing.medium_16},headerStringCaretEnd:{paddingInlineEnd:spacing.small_12,paddingInlineStart:spacing.medium_16},headerStringCaretStart:{paddingInlineEnd:spacing.medium_16,paddingInlineStart:spacing.small_12},iconWithAnimation:{transition:`transform ${ANIMATION_LENGTH}`},iconExpanded:{transform:"rotate(180deg)"},iconStart:{marginInlineStart:spacing.medium_16},iconEnd:{marginInlineEnd:spacing.medium_16},disabled:{pointerEvents:"none",color:"inherit",":focus-visible":{outline:`2px solid ${semanticColor.focus.outer}`}}});
 
-const AccordionSection=React.forwardRef(function AccordionSection(props,ref){const{children,id,header,collapsible,expanded,animated=false,onToggle,caretPosition="end",cornerKind="rounded",style,headerStyle,tag,testId,isFirstSection=true,isLastSection=true,isRegion=true,...ariaProps}=props;const[internalExpanded,setInternalExpanded]=React.useState(expanded??false);const controlledMode=expanded!==undefined&&onToggle;const uniqueSectionId=useId();const sectionId=id??uniqueSectionId;const uniqueHeaderId=useId();const headerId=id?`${id}-header`:uniqueHeaderId;const sectionContentUniqueId=useId();const sectionStyles=_generateStyles(cornerKind,isFirstSection,isLastSection);const handleClick=()=>{if(controlledMode){onToggle(!expanded);}else {setInternalExpanded(!internalExpanded);if(onToggle){onToggle(!internalExpanded);}}};let expandedState;if(collapsible===false){expandedState=true;}else {expandedState=controlledMode?expanded:internalExpanded;}return jsxs(View,{id:sectionId,style:[styles.wrapper,animated&&styles.wrapperWithAnimation,sectionStyles.wrapper,expandedState?styles.wrapperExpanded:styles.wrapperCollapsed,style],testId:testId,...ariaProps,children:[jsx(AccordionSectionHeader,{id:headerId,header:header,caretPosition:caretPosition,cornerKind:cornerKind,collapsible:collapsible,expanded:expandedState,animated:animated,onClick:handleClick,sectionContentUniqueId:sectionContentUniqueId,headerStyle:headerStyle,tag:tag,testId:testId,isFirstSection:isFirstSection,isLastSection:isLastSection,ref:ref}),jsx(View,{id:sectionContentUniqueId,role:isRegion?"region":undefined,"aria-labelledby":headerId,style:[styles.contentWrapper,expandedState?styles.contentWrapperExpanded:styles.conentWrapperCollapsed,sectionStyles.contentWrapper],testId:testId?`${testId}-content-panel`:undefined,children:typeof children==="string"?jsx(Body,{style:styles.stringContent,children:children}):children})]})});const styles=StyleSheet.create({wrapper:{display:"grid",position:"static",boxSizing:"border-box",backgroundColor:semanticColor.surface.primary},wrapperWithAnimation:{transition:"grid-template-rows 300ms"},wrapperCollapsed:{gridTemplateRows:"min-content 0fr"},wrapperExpanded:{gridTemplateRows:"min-content 1fr"},contentWrapper:{overflow:"hidden"},conentWrapperCollapsed:{visibility:"hidden"},contentWrapperExpanded:{visibility:"visible"},stringContent:{padding:spacing.medium_16}});const cornerStyles={};const _generateStyles=(cornerKind,isFirstSection,isLastSection)=>{const sectionType=`${cornerKind}-${isFirstSection.toString()}-${isLastSection.toString()}`;if(cornerStyles[sectionType]){return cornerStyles[sectionType]}let wrapperStyle=Object.freeze({});let contentWrapperStyle=Object.freeze({});let firstSectionStyle=Object.freeze({});let lastSectionStyle=Object.freeze({});const borderStyle=`1px solid ${semanticColor.core.border.neutral.subtle}`;if(cornerKind==="square"){wrapperStyle={border:borderStyle,borderBottom:"none",borderRadius:border.radius.radius_0};if(isLastSection){lastSectionStyle={borderBottom:borderStyle};}}if(cornerKind==="rounded"){wrapperStyle={border:borderStyle,borderBottom:"none"};if(isFirstSection){firstSectionStyle={borderStartStartRadius:spacing.small_12,borderStartEndRadius:spacing.small_12};}if(isLastSection){lastSectionStyle={borderBottom:borderStyle,borderEndStartRadius:spacing.small_12,borderEndEndRadius:spacing.small_12};contentWrapperStyle={borderEndEndRadius:spacing.small_12,borderEndStartRadius:spacing.small_12};}}if(cornerKind==="rounded-per-section"){wrapperStyle={border:borderStyle,borderRadius:border.radius.radius_120,marginBottom:spacing.medium_16};contentWrapperStyle={borderEndEndRadius:spacing.small_12,borderEndStartRadius:spacing.small_12};}const newStyles={wrapper:{...wrapperStyle,...firstSectionStyle,...lastSectionStyle},contentWrapper:contentWrapperStyle};cornerStyles[sectionType]=StyleSheet.create(newStyles);return cornerStyles[sectionType]};
+const AccordionSection=React.forwardRef(function AccordionSection(props,ref){const{children,id,header,collapsible,expanded,animated=false,onToggle,caretPosition="end",cornerKind="rounded",style,headerStyle,tag,testId,isFirstSection=true,isLastSection=true,isRegion=true,...ariaProps}=props;const[internalExpanded,setInternalExpanded]=React.useState(expanded??false);const controlledMode=expanded!==undefined&&onToggle;const uniqueSectionId=useId();const sectionId=id??uniqueSectionId;const uniqueHeaderId=useId();const headerId=id?`${id}-header`:uniqueHeaderId;const sectionContentUniqueId=useId();const sectionStyles=_generateStyles(cornerKind,isFirstSection,isLastSection);const handleClick=()=>{if(controlledMode){onToggle(!expanded);}else {setInternalExpanded(!internalExpanded);if(onToggle){onToggle(!internalExpanded);}}};let expandedState;if(collapsible===false){expandedState=true;}else {expandedState=controlledMode?expanded:internalExpanded;}return jsxs(View,{id:sectionId,style:[styles.wrapper,animated&&styles.wrapperWithAnimation,sectionStyles.wrapper,expandedState?styles.wrapperExpanded:styles.wrapperCollapsed,style],testId:testId,...ariaProps,children:[jsx(AccordionSectionHeader,{id:headerId,header:header,caretPosition:caretPosition,cornerKind:cornerKind,collapsible:collapsible,expanded:expandedState,animated:animated,onClick:handleClick,sectionContentUniqueId:sectionContentUniqueId,headerStyle:headerStyle,tag:tag,testId:testId,isFirstSection:isFirstSection,isLastSection:isLastSection,ref:ref}),jsx(View,{id:sectionContentUniqueId,role:isRegion?"region":undefined,"aria-labelledby":headerId,style:[styles.contentWrapper,expandedState?styles.contentWrapperExpanded:styles.conentWrapperCollapsed,sectionStyles.contentWrapper],testId:testId?`${testId}-content-panel`:undefined,children:typeof children==="string"?jsx(Body,{style:styles.stringContent,children:children}):children})]})});const styles=StyleSheet.create({wrapper:{display:"grid",position:"static",boxSizing:"border-box",backgroundColor:semanticColor.core.background.base.default},wrapperWithAnimation:{transition:"grid-template-rows 300ms"},wrapperCollapsed:{gridTemplateRows:"min-content 0fr"},wrapperExpanded:{gridTemplateRows:"min-content 1fr"},contentWrapper:{overflow:"hidden"},conentWrapperCollapsed:{visibility:"hidden"},contentWrapperExpanded:{visibility:"visible"},stringContent:{padding:spacing.medium_16}});const cornerStyles={};const _generateStyles=(cornerKind,isFirstSection,isLastSection)=>{const sectionType=`${cornerKind}-${isFirstSection.toString()}-${isLastSection.toString()}`;if(cornerStyles[sectionType]){return cornerStyles[sectionType]}let wrapperStyle=Object.freeze({});let contentWrapperStyle=Object.freeze({});let firstSectionStyle=Object.freeze({});let lastSectionStyle=Object.freeze({});const borderStyle=`1px solid ${semanticColor.core.border.neutral.subtle}`;if(cornerKind==="square"){wrapperStyle={border:borderStyle,borderBottom:"none",borderRadius:border.radius.radius_0};if(isLastSection){lastSectionStyle={borderBottom:borderStyle};}}if(cornerKind==="rounded"){wrapperStyle={border:borderStyle,borderBottom:"none"};if(isFirstSection){firstSectionStyle={borderStartStartRadius:spacing.small_12,borderStartEndRadius:spacing.small_12};}if(isLastSection){lastSectionStyle={borderBottom:borderStyle,borderEndStartRadius:spacing.small_12,borderEndEndRadius:spacing.small_12};contentWrapperStyle={borderEndEndRadius:spacing.small_12,borderEndStartRadius:spacing.small_12};}}if(cornerKind==="rounded-per-section"){wrapperStyle={border:borderStyle,borderRadius:border.radius.radius_120,marginBottom:spacing.medium_16};contentWrapperStyle={borderEndEndRadius:spacing.small_12,borderEndStartRadius:spacing.small_12};}const newStyles={wrapper:{...wrapperStyle,...firstSectionStyle,...lastSectionStyle},contentWrapper:contentWrapperStyle};cornerStyles[sectionType]=StyleSheet.create(newStyles);return cornerStyles[sectionType]};
 
 export { Accordion, AccordionSection };

package/dist/index.js

@@ -42,7 +42,7 @@ function getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expan
 
 const AccordionSectionHeader=React__namespace.forwardRef(function AccordionSectionHeader(props,ref){const{id,header,caretPosition,cornerKind,collapsible=true,expanded,animated,onClick,sectionContentUniqueId,headerStyle,tag="h2",testId,isFirstSection,isLastSection}=props;const headerIsString=typeof header==="string";const{roundedTop,roundedBottom}=getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expanded);return jsxRuntime.jsx(wonderBlocksTypography.HeadingSmall,{tag:tag,style:styles$1.heading,children:jsxRuntime.jsx(Clickable__default["default"],{id:id,"aria-expanded":expanded,"aria-controls":sectionContentUniqueId,onClick:onClick,disabled:!collapsible,testId:testId?`${testId}-header`:undefined,style:[styles$1.headerWrapper,animated&&styles$1.headerWrapperWithAnimation,caretPosition==="start"&&styles$1.headerWrapperCaretStart,roundedTop&&styles$1.roundedTop,roundedBottom&&styles$1.roundedBottom,headerStyle,!collapsible&&styles$1.disabled],ref:ref,children:()=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.headerContent,headerIsString&&styles$1.headerString],children:headerIsString?jsxRuntime.jsx(wonderBlocksCore.View,{style:[caretPosition==="end"?styles$1.headerStringCaretEnd:styles$1.headerStringCaretStart],children:header}):header}),collapsible&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:caretDown__default["default"],color:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,size:"small",style:[animated&&styles$1.iconWithAnimation,caretPosition==="start"?styles$1.iconStart:styles$1.iconEnd,expanded&&styles$1.iconExpanded],testId:testId?`${testId}-caret-icon`:undefined})]})})})});const INNER_BORDER_RADIUS=wonderBlocksTokens.spacing.small_12-1;const ANIMATION_LENGTH="300ms";const styles$1=aphrodite.StyleSheet.create({heading:{minWidth:0,marginTop:0},headerWrapper:{display:"flex",flexDirection:"row",alignItems:"center",overflow:"hidden",minWidth:"auto",width:"100%",position:"relative",zIndex:1,":active":{outline:`2px solid ${wonderBlocksTokens.semanticColor.action.secondary.progressive.press.border}`},":hover":{outline:`2px solid ${wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.border}`},":focus-visible":{outline:`2px solid ${wonderBlocksTokens.semanticColor.focus.outer}`}},headerWrapperWithAnimation:{transition:`border-radius ${ANIMATION_LENGTH}`},headerWrapperCaretStart:{flexDirection:"row-reverse"},roundedTop:{borderStartStartRadius:INNER_BORDER_RADIUS,borderStartEndRadius:INNER_BORDER_RADIUS},roundedBottom:{borderEndStartRadius:INNER_BORDER_RADIUS,borderEndEndRadius:INNER_BORDER_RADIUS},headerContent:{flexGrow:1,textAlign:"start"},headerString:{paddingTop:wonderBlocksTokens.spacing.medium_16,paddingBottom:wonderBlocksTokens.spacing.medium_16},headerStringCaretEnd:{paddingInlineEnd:wonderBlocksTokens.spacing.small_12,paddingInlineStart:wonderBlocksTokens.spacing.medium_16},headerStringCaretStart:{paddingInlineEnd:wonderBlocksTokens.spacing.medium_16,paddingInlineStart:wonderBlocksTokens.spacing.small_12},iconWithAnimation:{transition:`transform ${ANIMATION_LENGTH}`},iconExpanded:{transform:"rotate(180deg)"},iconStart:{marginInlineStart:wonderBlocksTokens.spacing.medium_16},iconEnd:{marginInlineEnd:wonderBlocksTokens.spacing.medium_16},disabled:{pointerEvents:"none",color:"inherit",":focus-visible":{outline:`2px solid ${wonderBlocksTokens.semanticColor.focus.outer}`}}});
 
-const AccordionSection=React__namespace.forwardRef(function AccordionSection(props,ref){const{children,id,header,collapsible,expanded,animated=false,onToggle,caretPosition="end",cornerKind="rounded",style,headerStyle,tag,testId,isFirstSection=true,isLastSection=true,isRegion=true,...ariaProps}=props;const[internalExpanded,setInternalExpanded]=React__namespace.useState(expanded??false);const controlledMode=expanded!==undefined&&onToggle;const uniqueSectionId=React.useId();const sectionId=id??uniqueSectionId;const uniqueHeaderId=React.useId();const headerId=id?`${id}-header`:uniqueHeaderId;const sectionContentUniqueId=React.useId();const sectionStyles=_generateStyles(cornerKind,isFirstSection,isLastSection);const handleClick=()=>{if(controlledMode){onToggle(!expanded);}else {setInternalExpanded(!internalExpanded);if(onToggle){onToggle(!internalExpanded);}}};let expandedState;if(collapsible===false){expandedState=true;}else {expandedState=controlledMode?expanded:internalExpanded;}return jsxRuntime.jsxs(wonderBlocksCore.View,{id:sectionId,style:[styles.wrapper,animated&&styles.wrapperWithAnimation,sectionStyles.wrapper,expandedState?styles.wrapperExpanded:styles.wrapperCollapsed,style],testId:testId,...ariaProps,children:[jsxRuntime.jsx(AccordionSectionHeader,{id:headerId,header:header,caretPosition:caretPosition,cornerKind:cornerKind,collapsible:collapsible,expanded:expandedState,animated:animated,onClick:handleClick,sectionContentUniqueId:sectionContentUniqueId,headerStyle:headerStyle,tag:tag,testId:testId,isFirstSection:isFirstSection,isLastSection:isLastSection,ref:ref}),jsxRuntime.jsx(wonderBlocksCore.View,{id:sectionContentUniqueId,role:isRegion?"region":undefined,"aria-labelledby":headerId,style:[styles.contentWrapper,expandedState?styles.contentWrapperExpanded:styles.conentWrapperCollapsed,sectionStyles.contentWrapper],testId:testId?`${testId}-content-panel`:undefined,children:typeof children==="string"?jsxRuntime.jsx(wonderBlocksTypography.Body,{style:styles.stringContent,children:children}):children})]})});const styles=aphrodite.StyleSheet.create({wrapper:{display:"grid",position:"static",boxSizing:"border-box",backgroundColor:wonderBlocksTokens.semanticColor.surface.primary},wrapperWithAnimation:{transition:"grid-template-rows 300ms"},wrapperCollapsed:{gridTemplateRows:"min-content 0fr"},wrapperExpanded:{gridTemplateRows:"min-content 1fr"},contentWrapper:{overflow:"hidden"},conentWrapperCollapsed:{visibility:"hidden"},contentWrapperExpanded:{visibility:"visible"},stringContent:{padding:wonderBlocksTokens.spacing.medium_16}});const cornerStyles={};const _generateStyles=(cornerKind,isFirstSection,isLastSection)=>{const sectionType=`${cornerKind}-${isFirstSection.toString()}-${isLastSection.toString()}`;if(cornerStyles[sectionType]){return cornerStyles[sectionType]}let wrapperStyle=Object.freeze({});let contentWrapperStyle=Object.freeze({});let firstSectionStyle=Object.freeze({});let lastSectionStyle=Object.freeze({});const borderStyle=`1px solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`;if(cornerKind==="square"){wrapperStyle={border:borderStyle,borderBottom:"none",borderRadius:wonderBlocksTokens.border.radius.radius_0};if(isLastSection){lastSectionStyle={borderBottom:borderStyle};}}if(cornerKind==="rounded"){wrapperStyle={border:borderStyle,borderBottom:"none"};if(isFirstSection){firstSectionStyle={borderStartStartRadius:wonderBlocksTokens.spacing.small_12,borderStartEndRadius:wonderBlocksTokens.spacing.small_12};}if(isLastSection){lastSectionStyle={borderBottom:borderStyle,borderEndStartRadius:wonderBlocksTokens.spacing.small_12,borderEndEndRadius:wonderBlocksTokens.spacing.small_12};contentWrapperStyle={borderEndEndRadius:wonderBlocksTokens.spacing.small_12,borderEndStartRadius:wonderBlocksTokens.spacing.small_12};}}if(cornerKind==="rounded-per-section"){wrapperStyle={border:borderStyle,borderRadius:wonderBlocksTokens.border.radius.radius_120,marginBottom:wonderBlocksTokens.spacing.medium_16};contentWrapperStyle={borderEndEndRadius:wonderBlocksTokens.spacing.small_12,borderEndStartRadius:wonderBlocksTokens.spacing.small_12};}const newStyles={wrapper:{...wrapperStyle,...firstSectionStyle,...lastSectionStyle},contentWrapper:contentWrapperStyle};cornerStyles[sectionType]=aphrodite.StyleSheet.create(newStyles);return cornerStyles[sectionType]};
+const AccordionSection=React__namespace.forwardRef(function AccordionSection(props,ref){const{children,id,header,collapsible,expanded,animated=false,onToggle,caretPosition="end",cornerKind="rounded",style,headerStyle,tag,testId,isFirstSection=true,isLastSection=true,isRegion=true,...ariaProps}=props;const[internalExpanded,setInternalExpanded]=React__namespace.useState(expanded??false);const controlledMode=expanded!==undefined&&onToggle;const uniqueSectionId=React.useId();const sectionId=id??uniqueSectionId;const uniqueHeaderId=React.useId();const headerId=id?`${id}-header`:uniqueHeaderId;const sectionContentUniqueId=React.useId();const sectionStyles=_generateStyles(cornerKind,isFirstSection,isLastSection);const handleClick=()=>{if(controlledMode){onToggle(!expanded);}else {setInternalExpanded(!internalExpanded);if(onToggle){onToggle(!internalExpanded);}}};let expandedState;if(collapsible===false){expandedState=true;}else {expandedState=controlledMode?expanded:internalExpanded;}return jsxRuntime.jsxs(wonderBlocksCore.View,{id:sectionId,style:[styles.wrapper,animated&&styles.wrapperWithAnimation,sectionStyles.wrapper,expandedState?styles.wrapperExpanded:styles.wrapperCollapsed,style],testId:testId,...ariaProps,children:[jsxRuntime.jsx(AccordionSectionHeader,{id:headerId,header:header,caretPosition:caretPosition,cornerKind:cornerKind,collapsible:collapsible,expanded:expandedState,animated:animated,onClick:handleClick,sectionContentUniqueId:sectionContentUniqueId,headerStyle:headerStyle,tag:tag,testId:testId,isFirstSection:isFirstSection,isLastSection:isLastSection,ref:ref}),jsxRuntime.jsx(wonderBlocksCore.View,{id:sectionContentUniqueId,role:isRegion?"region":undefined,"aria-labelledby":headerId,style:[styles.contentWrapper,expandedState?styles.contentWrapperExpanded:styles.conentWrapperCollapsed,sectionStyles.contentWrapper],testId:testId?`${testId}-content-panel`:undefined,children:typeof children==="string"?jsxRuntime.jsx(wonderBlocksTypography.Body,{style:styles.stringContent,children:children}):children})]})});const styles=aphrodite.StyleSheet.create({wrapper:{display:"grid",position:"static",boxSizing:"border-box",backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default},wrapperWithAnimation:{transition:"grid-template-rows 300ms"},wrapperCollapsed:{gridTemplateRows:"min-content 0fr"},wrapperExpanded:{gridTemplateRows:"min-content 1fr"},contentWrapper:{overflow:"hidden"},conentWrapperCollapsed:{visibility:"hidden"},contentWrapperExpanded:{visibility:"visible"},stringContent:{padding:wonderBlocksTokens.spacing.medium_16}});const cornerStyles={};const _generateStyles=(cornerKind,isFirstSection,isLastSection)=>{const sectionType=`${cornerKind}-${isFirstSection.toString()}-${isLastSection.toString()}`;if(cornerStyles[sectionType]){return cornerStyles[sectionType]}let wrapperStyle=Object.freeze({});let contentWrapperStyle=Object.freeze({});let firstSectionStyle=Object.freeze({});let lastSectionStyle=Object.freeze({});const borderStyle=`1px solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`;if(cornerKind==="square"){wrapperStyle={border:borderStyle,borderBottom:"none",borderRadius:wonderBlocksTokens.border.radius.radius_0};if(isLastSection){lastSectionStyle={borderBottom:borderStyle};}}if(cornerKind==="rounded"){wrapperStyle={border:borderStyle,borderBottom:"none"};if(isFirstSection){firstSectionStyle={borderStartStartRadius:wonderBlocksTokens.spacing.small_12,borderStartEndRadius:wonderBlocksTokens.spacing.small_12};}if(isLastSection){lastSectionStyle={borderBottom:borderStyle,borderEndStartRadius:wonderBlocksTokens.spacing.small_12,borderEndEndRadius:wonderBlocksTokens.spacing.small_12};contentWrapperStyle={borderEndEndRadius:wonderBlocksTokens.spacing.small_12,borderEndStartRadius:wonderBlocksTokens.spacing.small_12};}}if(cornerKind==="rounded-per-section"){wrapperStyle={border:borderStyle,borderRadius:wonderBlocksTokens.border.radius.radius_120,marginBottom:wonderBlocksTokens.spacing.medium_16};contentWrapperStyle={borderEndEndRadius:wonderBlocksTokens.spacing.small_12,borderEndStartRadius:wonderBlocksTokens.spacing.small_12};}const newStyles={wrapper:{...wrapperStyle,...firstSectionStyle,...lastSectionStyle},contentWrapper:contentWrapperStyle};cornerStyles[sectionType]=aphrodite.StyleSheet.create(newStyles);return cornerStyles[sectionType]};
 
 exports.Accordion = Accordion;
 exports.AccordionSection = AccordionSection;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-accordion",
-  "version": "3.1.37",
+  "version": "3.1.39",
   "design": "v1",
   "description": "Accordion components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -13,11 +13,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "7.1.23",
+    "@khanacademy/wonder-blocks-clickable": "7.1.25",
     "@khanacademy/wonder-blocks-core": "12.4.0",
-    "@khanacademy/wonder-blocks-icon": "5.2.17",
-    "@khanacademy/wonder-blocks-tokens": "12.2.0",
-    "@khanacademy/wonder-blocks-typography": "4.2.19"
+    "@khanacademy/wonder-blocks-icon": "5.2.19",
+    "@khanacademy/wonder-blocks-tokens": "13.0.0",
+    "@khanacademy/wonder-blocks-typography": "4.2.21"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",