@khanacademy/wonder-blocks-button 11.6.1 → 11.7.0

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

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

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @khanacademy/wonder-blocks-button
 
+## 11.7.0
+
+### Minor Changes
+
+- d69335d: Add new onFocus/onBlur on BaseButtonProps and a related ActivityButton fix
+
+### Patch Changes
+
+- Updated dependencies [d69335d]
+    - @khanacademy/wonder-blocks-clickable@8.2.2
+    - @khanacademy/wonder-blocks-core@12.4.4
+
+## 11.6.2
+
+### Patch Changes
+
+- Updated dependencies [a676ce6]
+    - @khanacademy/wonder-blocks-tokens@16.6.0
+    - @khanacademy/wonder-blocks-clickable@8.2.1
+    - @khanacademy/wonder-blocks-icon@5.3.16
+    - @khanacademy/wonder-blocks-progress-spinner@3.1.53
+    - @khanacademy/wonder-blocks-styles@0.2.46
+    - @khanacademy/wonder-blocks-typography@4.3.6
+
 ## 11.6.1
 
 ### Patch Changes

package/dist/components/activity-button.d.ts

@@ -57,6 +57,8 @@ export declare const ActivityButton: React.ForwardRefExoticComponent<Partial<Omi
     onMouseUp?: (e: React.MouseEvent) => unknown;
     onMouseEnter?: (e: React.MouseEvent) => unknown;
     onMouseLeave?: (e: React.MouseEvent) => unknown;
+    onBlur?: (e: React.FocusEvent) => unknown;
+    onFocus?: (e: React.FocusEvent) => unknown;
     beforeNav?: () => Promise<unknown>;
     safeWithNav?: () => Promise<unknown>;
 } & {

package/dist/components/button.d.ts

@@ -37,6 +37,8 @@ declare const Button: React.ForwardRefExoticComponent<Partial<Omit<import("@khan
     onMouseUp?: (e: React.MouseEvent) => unknown;
     onMouseEnter?: (e: React.MouseEvent) => unknown;
     onMouseLeave?: (e: React.MouseEvent) => unknown;
+    onBlur?: (e: React.FocusEvent) => unknown;
+    onFocus?: (e: React.FocusEvent) => unknown;
     beforeNav?: () => Promise<unknown>;
     safeWithNav?: () => Promise<unknown>;
 } & {

package/dist/es/index.js

@@ -20,8 +20,8 @@ const StyledA=addStyle("a");const StyledButton=addStyle("button");const StyledLi
 
 const ButtonCore=React.forwardRef(function ButtonCore(props,ref){const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,styles:stylesProp,id,waiting:_,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,...restProps}=props;const buttonStyles=_generateStyles$1(actionType,kind,size);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const label=jsx(BodyText,{size:size==="small"?"small":undefined,weight:size==="large"?"bold":undefined,tag:"span",style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxs(React.Fragment,{children:[startIcon&&jsx(View,{style:sharedStyles.iconWrapper,children:jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon,stylesProp?.startIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsx(CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsx(View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[sharedStyles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary],children:jsx(ButtonIcon,{size:iconSize,icon:endIcon,style:stylesProp?.endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,kind:kind,children:contents})});const sharedStyles=StyleSheet.create({shared:{height:theme$1.root.sizing.height.medium,paddingBlock:0},small:{height:theme$1.root.sizing.height.small},large:{height:theme$1.root.sizing.height.large},text:{alignItems:"center",fontWeight:theme$1.root.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme$1.root.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme$1.root.font.lineHeight.small},largeText:{fontSize:theme$1.root.font.size.large,lineHeight:theme$1.root.font.lineHeight.large},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginInlineStart:theme$1.icon.margin.inline.outer,marginInlineEnd:theme$1.icon.margin.inline.inner},tertiaryStartIcon:{marginInlineStart:0},endIcon:{marginInlineStart:theme$1.icon.margin.inline.inner},iconWrapper:{padding:theme$1.icon.padding,minInlineSize:"auto"},endIconWrapper:{marginInlineStart:theme$1.icon.margin.inline.inner,marginInlineEnd:theme$1.icon.margin.inline.outer},endIconWrapperTertiary:{marginInlineEnd:0}});const styles$1={};const _generateStyles$1=(actionType="progressive",kind,size)=>{const buttonType=`${actionType}-${kind}-${size}`;if(styles$1[buttonType]){return styles$1[buttonType]}const paddingInline=theme$1.root.layout.padding.inline[kind][size];const borderWidthKind=theme$1.root.border.width[kind];const outlineOffsetKind=theme$1.root.border.offset[kind];const themeVariant=semanticColor.action[kind][actionType];const disabledState=semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,borderRadius:theme$1.root.border.radius.default,background:disabledState.background,color:disabledState.foreground};const disabledStatesOverrides={...disabledStatesStyles,outline:"none",boxShadow:"none",textDecoration:"none",textDecorationThickness:"unset",textUnderlineOffset:"unset"};const pressStyles={background:themeVariant.press.background,borderRadius:theme$1.root.border.radius.press,color:themeVariant.press.foreground,...kind==="primary"?{outline:`${borderWidthKind.press} solid ${themeVariant.press.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.press.border,boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.press} ${theme$1.root.sizing.underline.press}`}:undefined};const newStyles={default:{borderRadius:theme$1.root.border.radius.default,paddingInline:paddingInline,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,transition:"border-radius 0.1s ease-in-out",["@media (hover: hover)"]:{":hover":{background:themeVariant.hover.background,borderRadius:theme$1.root.border.radius.hover,color:themeVariant.hover.foreground,...kind==="primary"?{outline:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.hover.border,boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.hover} ${theme$1.root.sizing.underline.hover}`}:undefined}},":active":pressStyles,...focusStyles.focus,...kind==="secondary"?{":focus-visible:hover":{...focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}, ${focusStyles.focus[":focus-visible"].boxShadow}`},":focus-visible:active":{...focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}, ${focusStyles.focus[":focus-visible"].boxShadow}`}}:{}},pressed:pressStyles,focused:focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":disabledStatesOverrides,":active":disabledStatesOverrides,":focus-visible":disabledStatesStyles}};styles$1[buttonType]=StyleSheet.create(newStyles);return styles$1[buttonType]};
 
-const Button=React.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,actionType="progressive",kind="primary",size="medium",disabled=false,spinner=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,...sharedButtonCoreProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:roleForEvents,type:type,onClick:onClick,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>{return jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,actionType:actionType,kind:kind,size:size,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});
+const Button=React.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,actionType="progressive",kind="primary",size="medium",disabled=false,spinner=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,onBlur,onFocus,...sharedButtonCoreProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:roleForEvents,type:type,onClick:onClick,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,onBlur:onBlur,onFocus:onFocus,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>{return jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,actionType:actionType,kind:kind,size:size,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});
 
-const ActivityButtonCore=React.forwardRef(function ActivityButtonCore(props,ref){const{actionType="progressive",children,disabled=false,kind="primary",focused,pressed,styles:stylesProp,type=undefined,startIcon,endIcon,hovered:_,waiting:__,...restProps}=props;const buttonStyles=_generateStyles(actionType,disabled,kind);const sharedStyles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,stylesProp?.root];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed,stylesProp?.box];return jsx(ButtonUnstyled,{...restProps,disabled:disabled,kind:kind,ref:ref,style:sharedStyles,type:type,children:jsx(Fragment,{children:jsxs(View,{style:chonkyStyles,className:"chonky",children:[startIcon&&(typeof startIcon==="string"?jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:startIcon,style:[styles.icon,stylesProp?.startIcon],"aria-hidden":"true"}):React.cloneElement(startIcon,{"aria-hidden":true,style:[styles.icon,stylesProp?.startIcon]})),jsx(BodyText,{tag:"span",size:"medium",weight:"semi",style:[styles.label,stylesProp?.label],children:children}),endIcon&&(typeof endIcon==="string"?jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:endIcon,style:[styles.icon,stylesProp?.endIcon],"aria-hidden":"true"}):React.cloneElement(endIcon,{"aria-hidden":true,style:[styles.icon,stylesProp?.endIcon]}))]})})})});const ActivityButton=React.forwardRef(function ActivityButton(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,kind="primary",disabled=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,...sharedButtonCoreProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsx(ClickableBehavior,{disabled:disabled,href:href,role:roleForEvents,type:type,onClick:onClick,safeWithNav:safeWithNav,rel:rel,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,...extraClickableProps,children:(state,restChildProps)=>{return jsx(ActivityButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,kind:kind,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});const theme={root:{border:{width:{primary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin},secondary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin},tertiary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin}},radius:border.radius.radius_120},layout:{padding:{block:sizing.size_140,inline:sizing.size_480}},shadow:{y:{rest:"6px",hover:"8px",press:sizing.size_0}}},label:{color:{progressive:semanticColor.core.foreground.instructive.default,neutral:semanticColor.core.foreground.neutral.default,disabled:semanticColor.core.foreground.disabled.default},font:{lineHeight:sizing.size_140},layout:{padding:{blockStart:sizing.size_040,blockEnd:sizing.size_060},width:sizing.size_640}},icon:{sizing:{height:sizing.size_200,width:sizing.size_200}}};const styles={icon:{alignSelf:"center",width:theme.icon.sizing.width,height:theme.icon.sizing.height},label:{lineHeight:theme.label.font.lineHeight,paddingBlockStart:theme.label.layout.padding.blockStart,paddingBlockEnd:theme.label.layout.padding.blockEnd}};const stateStyles={};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(stateStyles[buttonType]){return stateStyles[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=semanticColor.chonky[actionType];const disabledState=semanticColor.chonky.disabled;const disabledStatesStyles={outline:"none",transform:"none"};const chonkyDisabled={background:disabledState.background[kind],borderWidth:borderWidthKind.rest,borderColor:disabledState.border[kind],color:disabledState.foreground[kind],boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${disabledState.shadow[kind]}`,transform:"none"};const chonkyPressed={background:themeVariant.background[kind].press,border:`${borderWidthKind.press} solid ${themeVariant.border[kind].press}`,boxShadow:`0 ${theme.root.shadow.y.press} 0 0 ${themeVariant.shadow[kind].press}`,color:themeVariant.foreground[kind].press,transform:`translateY(${theme.root.shadow.y.rest})`};const newStyles={button:{background:"transparent",borderRadius:theme.root.border.radius,color:theme.label.color[actionType],height:"auto",flexDirection:"column",gap:sizing.size_020,alignSelf:"flex-start",justifySelf:"center",[":is(:hover) .chonky"]:{background:themeVariant.background[kind].hover,border:`${borderWidthKind.hover} solid ${themeVariant.border[kind].hover}`,boxShadow:`0 ${theme.root.shadow.y.hover} 0 0 ${themeVariant.shadow[kind].hover}`,color:themeVariant.foreground[kind].hover,transform:`translateY(calc((${theme.root.shadow.y.hover} - ${theme.root.shadow.y.rest}) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...focusStyles.focus},focused:focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",color:theme.label.color.disabled,...disabledStatesStyles,":hover":disabledStatesStyles,":active":disabledStatesStyles,":focus-visible":{transform:"none"},[":is(:hover) .chonky"]:disabledStatesStyles,[":is(:hover) .chonky"]:chonkyDisabled,[":is(:active) .chonky"]:chonkyDisabled},pressed:{[".chonky"]:chonkyPressed},chonky:{flexDirection:"row",gap:sizing.size_080,borderRadius:theme.root.border.radius,marginBlockEnd:theme.root.shadow.y.rest,maxWidth:"100%",paddingBlock:theme.root.layout.padding.block,paddingInline:theme.root.layout.padding.inline,background:themeVariant.background[kind].rest,border:`${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,color:themeVariant.foreground[kind].rest,boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${themeVariant.shadow[kind].rest}`,transition:"all 0.12s ease-out",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled};stateStyles[buttonType]=StyleSheet.create(newStyles);return stateStyles[buttonType]};
+const ActivityButtonCore=React.forwardRef(function ActivityButtonCore(props,ref){const{actionType="progressive",children,disabled=false,kind="primary",focused,pressed,styles:stylesProp,type=undefined,startIcon,endIcon,hovered:_,waiting:__,...restProps}=props;const buttonStyles=_generateStyles(actionType,disabled,kind);const sharedStyles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,stylesProp?.root];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed,stylesProp?.box];return jsx(ButtonUnstyled,{...restProps,disabled:disabled,kind:kind,ref:ref,style:sharedStyles,type:type,children:jsx(Fragment,{children:jsxs(View,{style:chonkyStyles,className:"chonky",children:[startIcon&&(typeof startIcon==="string"?jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:startIcon,style:[styles.icon,stylesProp?.startIcon],"aria-hidden":"true"}):React.cloneElement(startIcon,{"aria-hidden":true,style:[styles.icon,stylesProp?.startIcon]})),jsx(BodyText,{tag:"span",size:"medium",weight:"semi",style:[styles.label,stylesProp?.label],children:children}),endIcon&&(typeof endIcon==="string"?jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:endIcon,style:[styles.icon,stylesProp?.endIcon],"aria-hidden":"true"}):React.cloneElement(endIcon,{"aria-hidden":true,style:[styles.icon,stylesProp?.endIcon]}))]})})})});const ActivityButton=React.forwardRef(function ActivityButton(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,kind="primary",disabled=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,onBlur,onFocus,...sharedButtonCoreProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsx(ClickableBehavior,{disabled:disabled,href:href,role:roleForEvents,type:type,onClick:onClick,safeWithNav:safeWithNav,rel:rel,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,onBlur:onBlur,onFocus:onFocus,...extraClickableProps,children:(state,restChildProps)=>{return jsx(ActivityButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,kind:kind,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});const theme={root:{border:{width:{primary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin},secondary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin},tertiary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin}},radius:border.radius.radius_120},layout:{padding:{block:sizing.size_140,inline:sizing.size_480}},shadow:{y:{rest:"6px",hover:"8px",press:sizing.size_0}}},label:{color:{progressive:semanticColor.core.foreground.instructive.default,neutral:semanticColor.core.foreground.neutral.default,disabled:semanticColor.core.foreground.disabled.default},font:{lineHeight:sizing.size_140},layout:{padding:{blockStart:sizing.size_040,blockEnd:sizing.size_060},width:sizing.size_640}},icon:{sizing:{height:sizing.size_200,width:sizing.size_200}}};const styles={icon:{alignSelf:"center",width:theme.icon.sizing.width,height:theme.icon.sizing.height},label:{lineHeight:theme.label.font.lineHeight,paddingBlockStart:theme.label.layout.padding.blockStart,paddingBlockEnd:theme.label.layout.padding.blockEnd}};const stateStyles={};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(stateStyles[buttonType]){return stateStyles[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=semanticColor.chonky[actionType];const disabledState=semanticColor.chonky.disabled;const disabledStatesStyles={outline:"none",transform:"none"};const chonkyDisabled={background:disabledState.background[kind],borderWidth:borderWidthKind.rest,borderColor:disabledState.border[kind],color:disabledState.foreground[kind],boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${disabledState.shadow[kind]}`,transform:"none"};const chonkyPressed={background:themeVariant.background[kind].press,border:`${borderWidthKind.press} solid ${themeVariant.border[kind].press}`,boxShadow:`0 ${theme.root.shadow.y.press} 0 0 ${themeVariant.shadow[kind].press}`,color:themeVariant.foreground[kind].press,transform:`translateY(${theme.root.shadow.y.rest})`};const newStyles={button:{background:"transparent",borderRadius:theme.root.border.radius,color:theme.label.color[actionType],height:"auto",flexDirection:"column",gap:sizing.size_020,alignSelf:"flex-start",justifySelf:"center",[":is(:hover) .chonky"]:{background:themeVariant.background[kind].hover,border:`${borderWidthKind.hover} solid ${themeVariant.border[kind].hover}`,boxShadow:`0 ${theme.root.shadow.y.hover} 0 0 ${themeVariant.shadow[kind].hover}`,color:themeVariant.foreground[kind].hover,transform:`translateY(calc((${theme.root.shadow.y.hover} - ${theme.root.shadow.y.rest}) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...focusStyles.focus},focused:focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",color:theme.label.color.disabled,...disabledStatesStyles,":hover":disabledStatesStyles,":active":disabledStatesStyles,":focus-visible":{transform:"none"},[":is(:hover) .chonky"]:disabledStatesStyles,[":is(:hover) .chonky"]:chonkyDisabled,[":is(:active) .chonky"]:chonkyDisabled},pressed:{[".chonky"]:chonkyPressed},chonky:{flexDirection:"row",gap:sizing.size_080,borderRadius:theme.root.border.radius,marginBlockEnd:theme.root.shadow.y.rest,maxWidth:"100%",paddingBlock:theme.root.layout.padding.block,paddingInline:theme.root.layout.padding.inline,background:themeVariant.background[kind].rest,border:`${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,color:themeVariant.foreground[kind].rest,boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${themeVariant.shadow[kind].rest}`,transition:"all 0.12s ease-out",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled};stateStyles[buttonType]=StyleSheet.create(newStyles);return stateStyles[buttonType]};
 
 export { ActivityButton, Button as default };

package/dist/index.js

@@ -44,9 +44,9 @@ const StyledA=wonderBlocksCore.addStyle("a");const StyledButton=wonderBlocksCore
 
 const ButtonCore=React__namespace.forwardRef(function ButtonCore(props,ref){const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,styles:stylesProp,id,waiting:_,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,...restProps}=props;const buttonStyles=_generateStyles$1(actionType,kind,size);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const label=jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:size==="small"?"small":undefined,weight:size==="large"?"bold":undefined,tag:"span",style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxRuntime.jsxs(React__namespace.Fragment,{children:[startIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{style:sharedStyles.iconWrapper,children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon,stylesProp?.startIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsxRuntime.jsx(wonderBlocksProgressSpinner.CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[sharedStyles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary],children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:endIcon,style:stylesProp?.endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsxRuntime.jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,kind:kind,children:contents})});const sharedStyles=aphrodite.StyleSheet.create({shared:{height:theme$1.root.sizing.height.medium,paddingBlock:0},small:{height:theme$1.root.sizing.height.small},large:{height:theme$1.root.sizing.height.large},text:{alignItems:"center",fontWeight:theme$1.root.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme$1.root.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme$1.root.font.lineHeight.small},largeText:{fontSize:theme$1.root.font.size.large,lineHeight:theme$1.root.font.lineHeight.large},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginInlineStart:theme$1.icon.margin.inline.outer,marginInlineEnd:theme$1.icon.margin.inline.inner},tertiaryStartIcon:{marginInlineStart:0},endIcon:{marginInlineStart:theme$1.icon.margin.inline.inner},iconWrapper:{padding:theme$1.icon.padding,minInlineSize:"auto"},endIconWrapper:{marginInlineStart:theme$1.icon.margin.inline.inner,marginInlineEnd:theme$1.icon.margin.inline.outer},endIconWrapperTertiary:{marginInlineEnd:0}});const styles$1={};const _generateStyles$1=(actionType="progressive",kind,size)=>{const buttonType=`${actionType}-${kind}-${size}`;if(styles$1[buttonType]){return styles$1[buttonType]}const paddingInline=theme$1.root.layout.padding.inline[kind][size];const borderWidthKind=theme$1.root.border.width[kind];const outlineOffsetKind=theme$1.root.border.offset[kind];const themeVariant=wonderBlocksTokens.semanticColor.action[kind][actionType];const disabledState=wonderBlocksTokens.semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,borderRadius:theme$1.root.border.radius.default,background:disabledState.background,color:disabledState.foreground};const disabledStatesOverrides={...disabledStatesStyles,outline:"none",boxShadow:"none",textDecoration:"none",textDecorationThickness:"unset",textUnderlineOffset:"unset"};const pressStyles={background:themeVariant.press.background,borderRadius:theme$1.root.border.radius.press,color:themeVariant.press.foreground,...kind==="primary"?{outline:`${borderWidthKind.press} solid ${themeVariant.press.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.press.border,boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.press} ${theme$1.root.sizing.underline.press}`}:undefined};const newStyles={default:{borderRadius:theme$1.root.border.radius.default,paddingInline:paddingInline,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,transition:"border-radius 0.1s ease-in-out",["@media (hover: hover)"]:{":hover":{background:themeVariant.hover.background,borderRadius:theme$1.root.border.radius.hover,color:themeVariant.hover.foreground,...kind==="primary"?{outline:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.hover.border,boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.hover} ${theme$1.root.sizing.underline.hover}`}:undefined}},":active":pressStyles,...wonderBlocksStyles.focusStyles.focus,...kind==="secondary"?{":focus-visible:hover":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`},":focus-visible:active":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}}:{}},pressed:pressStyles,focused:wonderBlocksStyles.focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":disabledStatesOverrides,":active":disabledStatesOverrides,":focus-visible":disabledStatesStyles}};styles$1[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles$1[buttonType]};
 
-const Button=React__namespace.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,actionType="progressive",kind="primary",size="medium",disabled=false,spinner=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,...sharedButtonCoreProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsxRuntime.jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:roleForEvents,type:type,onClick:onClick,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>{return jsxRuntime.jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,actionType:actionType,kind:kind,size:size,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});
+const Button=React__namespace.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,actionType="progressive",kind="primary",size="medium",disabled=false,spinner=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,onBlur,onFocus,...sharedButtonCoreProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsxRuntime.jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:roleForEvents,type:type,onClick:onClick,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,onBlur:onBlur,onFocus:onFocus,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>{return jsxRuntime.jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,actionType:actionType,kind:kind,size:size,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});
 
-const ActivityButtonCore=React__namespace.forwardRef(function ActivityButtonCore(props,ref){const{actionType="progressive",children,disabled=false,kind="primary",focused,pressed,styles:stylesProp,type=undefined,startIcon,endIcon,hovered:_,waiting:__,...restProps}=props;const buttonStyles=_generateStyles(actionType,disabled,kind);const sharedStyles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,stylesProp?.root];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed,stylesProp?.box];return jsxRuntime.jsx(ButtonUnstyled,{...restProps,disabled:disabled,kind:kind,ref:ref,style:sharedStyles,type:type,children:jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs(wonderBlocksCore.View,{style:chonkyStyles,className:"chonky",children:[startIcon&&(typeof startIcon==="string"?jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:startIcon,style:[styles.icon,stylesProp?.startIcon],"aria-hidden":"true"}):React__namespace.cloneElement(startIcon,{"aria-hidden":true,style:[styles.icon,stylesProp?.startIcon]})),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",size:"medium",weight:"semi",style:[styles.label,stylesProp?.label],children:children}),endIcon&&(typeof endIcon==="string"?jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:endIcon,style:[styles.icon,stylesProp?.endIcon],"aria-hidden":"true"}):React__namespace.cloneElement(endIcon,{"aria-hidden":true,style:[styles.icon,stylesProp?.endIcon]}))]})})})});const ActivityButton=React__namespace.forwardRef(function ActivityButton(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,kind="primary",disabled=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,...sharedButtonCoreProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsxRuntime.jsx(ClickableBehavior,{disabled:disabled,href:href,role:roleForEvents,type:type,onClick:onClick,safeWithNav:safeWithNav,rel:rel,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,...extraClickableProps,children:(state,restChildProps)=>{return jsxRuntime.jsx(ActivityButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,kind:kind,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});const theme={root:{border:{width:{primary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},secondary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},tertiary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin}},radius:wonderBlocksTokens.border.radius.radius_120},layout:{padding:{block:wonderBlocksTokens.sizing.size_140,inline:wonderBlocksTokens.sizing.size_480}},shadow:{y:{rest:"6px",hover:"8px",press:wonderBlocksTokens.sizing.size_0}}},label:{color:{progressive:wonderBlocksTokens.semanticColor.core.foreground.instructive.default,neutral:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,disabled:wonderBlocksTokens.semanticColor.core.foreground.disabled.default},font:{lineHeight:wonderBlocksTokens.sizing.size_140},layout:{padding:{blockStart:wonderBlocksTokens.sizing.size_040,blockEnd:wonderBlocksTokens.sizing.size_060},width:wonderBlocksTokens.sizing.size_640}},icon:{sizing:{height:wonderBlocksTokens.sizing.size_200,width:wonderBlocksTokens.sizing.size_200}}};const styles={icon:{alignSelf:"center",width:theme.icon.sizing.width,height:theme.icon.sizing.height},label:{lineHeight:theme.label.font.lineHeight,paddingBlockStart:theme.label.layout.padding.blockStart,paddingBlockEnd:theme.label.layout.padding.blockEnd}};const stateStyles={};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(stateStyles[buttonType]){return stateStyles[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=wonderBlocksTokens.semanticColor.chonky[actionType];const disabledState=wonderBlocksTokens.semanticColor.chonky.disabled;const disabledStatesStyles={outline:"none",transform:"none"};const chonkyDisabled={background:disabledState.background[kind],borderWidth:borderWidthKind.rest,borderColor:disabledState.border[kind],color:disabledState.foreground[kind],boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${disabledState.shadow[kind]}`,transform:"none"};const chonkyPressed={background:themeVariant.background[kind].press,border:`${borderWidthKind.press} solid ${themeVariant.border[kind].press}`,boxShadow:`0 ${theme.root.shadow.y.press} 0 0 ${themeVariant.shadow[kind].press}`,color:themeVariant.foreground[kind].press,transform:`translateY(${theme.root.shadow.y.rest})`};const newStyles={button:{background:"transparent",borderRadius:theme.root.border.radius,color:theme.label.color[actionType],height:"auto",flexDirection:"column",gap:wonderBlocksTokens.sizing.size_020,alignSelf:"flex-start",justifySelf:"center",[":is(:hover) .chonky"]:{background:themeVariant.background[kind].hover,border:`${borderWidthKind.hover} solid ${themeVariant.border[kind].hover}`,boxShadow:`0 ${theme.root.shadow.y.hover} 0 0 ${themeVariant.shadow[kind].hover}`,color:themeVariant.foreground[kind].hover,transform:`translateY(calc((${theme.root.shadow.y.hover} - ${theme.root.shadow.y.rest}) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...wonderBlocksStyles.focusStyles.focus},focused:wonderBlocksStyles.focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",color:theme.label.color.disabled,...disabledStatesStyles,":hover":disabledStatesStyles,":active":disabledStatesStyles,":focus-visible":{transform:"none"},[":is(:hover) .chonky"]:disabledStatesStyles,[":is(:hover) .chonky"]:chonkyDisabled,[":is(:active) .chonky"]:chonkyDisabled},pressed:{[".chonky"]:chonkyPressed},chonky:{flexDirection:"row",gap:wonderBlocksTokens.sizing.size_080,borderRadius:theme.root.border.radius,marginBlockEnd:theme.root.shadow.y.rest,maxWidth:"100%",paddingBlock:theme.root.layout.padding.block,paddingInline:theme.root.layout.padding.inline,background:themeVariant.background[kind].rest,border:`${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,color:themeVariant.foreground[kind].rest,boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${themeVariant.shadow[kind].rest}`,transition:"all 0.12s ease-out",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled};stateStyles[buttonType]=aphrodite.StyleSheet.create(newStyles);return stateStyles[buttonType]};
+const ActivityButtonCore=React__namespace.forwardRef(function ActivityButtonCore(props,ref){const{actionType="progressive",children,disabled=false,kind="primary",focused,pressed,styles:stylesProp,type=undefined,startIcon,endIcon,hovered:_,waiting:__,...restProps}=props;const buttonStyles=_generateStyles(actionType,disabled,kind);const sharedStyles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,stylesProp?.root];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed,stylesProp?.box];return jsxRuntime.jsx(ButtonUnstyled,{...restProps,disabled:disabled,kind:kind,ref:ref,style:sharedStyles,type:type,children:jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs(wonderBlocksCore.View,{style:chonkyStyles,className:"chonky",children:[startIcon&&(typeof startIcon==="string"?jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:startIcon,style:[styles.icon,stylesProp?.startIcon],"aria-hidden":"true"}):React__namespace.cloneElement(startIcon,{"aria-hidden":true,style:[styles.icon,stylesProp?.startIcon]})),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",size:"medium",weight:"semi",style:[styles.label,stylesProp?.label],children:children}),endIcon&&(typeof endIcon==="string"?jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:endIcon,style:[styles.icon,stylesProp?.endIcon],"aria-hidden":"true"}):React__namespace.cloneElement(endIcon,{"aria-hidden":true,style:[styles.icon,stylesProp?.endIcon]}))]})})})});const ActivityButton=React__namespace.forwardRef(function ActivityButton(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,kind="primary",disabled=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,onBlur,onFocus,...sharedButtonCoreProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsxRuntime.jsx(ClickableBehavior,{disabled:disabled,href:href,role:roleForEvents,type:type,onClick:onClick,safeWithNav:safeWithNav,rel:rel,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,onBlur:onBlur,onFocus:onFocus,...extraClickableProps,children:(state,restChildProps)=>{return jsxRuntime.jsx(ActivityButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,kind:kind,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});const theme={root:{border:{width:{primary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},secondary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},tertiary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin}},radius:wonderBlocksTokens.border.radius.radius_120},layout:{padding:{block:wonderBlocksTokens.sizing.size_140,inline:wonderBlocksTokens.sizing.size_480}},shadow:{y:{rest:"6px",hover:"8px",press:wonderBlocksTokens.sizing.size_0}}},label:{color:{progressive:wonderBlocksTokens.semanticColor.core.foreground.instructive.default,neutral:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,disabled:wonderBlocksTokens.semanticColor.core.foreground.disabled.default},font:{lineHeight:wonderBlocksTokens.sizing.size_140},layout:{padding:{blockStart:wonderBlocksTokens.sizing.size_040,blockEnd:wonderBlocksTokens.sizing.size_060},width:wonderBlocksTokens.sizing.size_640}},icon:{sizing:{height:wonderBlocksTokens.sizing.size_200,width:wonderBlocksTokens.sizing.size_200}}};const styles={icon:{alignSelf:"center",width:theme.icon.sizing.width,height:theme.icon.sizing.height},label:{lineHeight:theme.label.font.lineHeight,paddingBlockStart:theme.label.layout.padding.blockStart,paddingBlockEnd:theme.label.layout.padding.blockEnd}};const stateStyles={};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(stateStyles[buttonType]){return stateStyles[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=wonderBlocksTokens.semanticColor.chonky[actionType];const disabledState=wonderBlocksTokens.semanticColor.chonky.disabled;const disabledStatesStyles={outline:"none",transform:"none"};const chonkyDisabled={background:disabledState.background[kind],borderWidth:borderWidthKind.rest,borderColor:disabledState.border[kind],color:disabledState.foreground[kind],boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${disabledState.shadow[kind]}`,transform:"none"};const chonkyPressed={background:themeVariant.background[kind].press,border:`${borderWidthKind.press} solid ${themeVariant.border[kind].press}`,boxShadow:`0 ${theme.root.shadow.y.press} 0 0 ${themeVariant.shadow[kind].press}`,color:themeVariant.foreground[kind].press,transform:`translateY(${theme.root.shadow.y.rest})`};const newStyles={button:{background:"transparent",borderRadius:theme.root.border.radius,color:theme.label.color[actionType],height:"auto",flexDirection:"column",gap:wonderBlocksTokens.sizing.size_020,alignSelf:"flex-start",justifySelf:"center",[":is(:hover) .chonky"]:{background:themeVariant.background[kind].hover,border:`${borderWidthKind.hover} solid ${themeVariant.border[kind].hover}`,boxShadow:`0 ${theme.root.shadow.y.hover} 0 0 ${themeVariant.shadow[kind].hover}`,color:themeVariant.foreground[kind].hover,transform:`translateY(calc((${theme.root.shadow.y.hover} - ${theme.root.shadow.y.rest}) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...wonderBlocksStyles.focusStyles.focus},focused:wonderBlocksStyles.focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",color:theme.label.color.disabled,...disabledStatesStyles,":hover":disabledStatesStyles,":active":disabledStatesStyles,":focus-visible":{transform:"none"},[":is(:hover) .chonky"]:disabledStatesStyles,[":is(:hover) .chonky"]:chonkyDisabled,[":is(:active) .chonky"]:chonkyDisabled},pressed:{[".chonky"]:chonkyPressed},chonky:{flexDirection:"row",gap:wonderBlocksTokens.sizing.size_080,borderRadius:theme.root.border.radius,marginBlockEnd:theme.root.shadow.y.rest,maxWidth:"100%",paddingBlock:theme.root.layout.padding.block,paddingInline:theme.root.layout.padding.inline,background:themeVariant.background[kind].rest,border:`${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,color:themeVariant.foreground[kind].rest,boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${themeVariant.shadow[kind].rest}`,transition:"all 0.12s ease-out",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled};stateStyles[buttonType]=aphrodite.StyleSheet.create(newStyles);return stateStyles[buttonType]};
 
 exports.ActivityButton = ActivityButton;
 exports["default"] = Button;

package/dist/util/button.types.d.ts

@@ -130,6 +130,14 @@ Partial<Omit<AriaProps, "aria-disabled">> & {
      * Respond to a raw "mouseleave" event.
      */
     onMouseLeave?: (e: React.MouseEvent) => unknown;
+    /**
+     * Respond to a raw "blur" event.
+     */
+    onBlur?: (e: React.FocusEvent) => unknown;
+    /**
+     * Respond to a raw "focus" event.
+     */
+    onFocus?: (e: React.FocusEvent) => unknown;
     /**
      * Run async code before navigating. If the promise returned rejects then
      * navigation will not occur.

package/package.json

@@ -3,7 +3,7 @@
   "description": "",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "11.6.1",
+  "version": "11.7.0",
   "publishConfig": {
     "access": "public"
   },
@@ -28,13 +28,13 @@
     "./styles.css": "./dist/css/vars.css"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "8.2.0",
+    "@khanacademy/wonder-blocks-clickable": "8.2.2",
     "@khanacademy/wonder-blocks-core": "12.4.4",
-    "@khanacademy/wonder-blocks-icon": "5.3.15",
-    "@khanacademy/wonder-blocks-progress-spinner": "3.1.52",
-    "@khanacademy/wonder-blocks-styles": "0.2.45",
-    "@khanacademy/wonder-blocks-tokens": "16.5.0",
-    "@khanacademy/wonder-blocks-typography": "4.3.5"
+    "@khanacademy/wonder-blocks-icon": "5.3.16",
+    "@khanacademy/wonder-blocks-progress-spinner": "3.1.53",
+    "@khanacademy/wonder-blocks-styles": "0.2.46",
+    "@khanacademy/wonder-blocks-tokens": "16.6.0",
+    "@khanacademy/wonder-blocks-typography": "4.3.6"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",