@khanacademy/wonder-blocks-form 7.2.3 → 7.2.5

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

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

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @khanacademy/wonder-blocks-form
 
+## 7.2.5
+
+### Patch Changes
+
+- 956f8bd: Updates CSS variables for the form package
+- 956f8bd: Replaces instances of `semanticColor.text` with `semanticColor.core.foreground`
+- Updated dependencies [eafcfa3]
+- Updated dependencies [956f8bd]
+- Updated dependencies [eafcfa3]
+- Updated dependencies [b42b694]
+- Updated dependencies [956f8bd]
+    - @khanacademy/wonder-blocks-tokens@12.0.0
+    - @khanacademy/wonder-blocks-clickable@7.1.18
+    - @khanacademy/wonder-blocks-icon@5.2.12
+    - @khanacademy/wonder-blocks-layout@3.1.29
+    - @khanacademy/wonder-blocks-typography@4.2.14
+
+## 7.2.4
+
+### Patch Changes
+
+- Updated dependencies [03415d1]
+    - @khanacademy/wonder-blocks-tokens@11.4.1
+    - @khanacademy/wonder-blocks-clickable@7.1.17
+    - @khanacademy/wonder-blocks-icon@5.2.11
+    - @khanacademy/wonder-blocks-layout@3.1.28
+    - @khanacademy/wonder-blocks-typography@4.2.13
+
 ## 7.2.3
 
 ### Patch Changes

package/dist/css/vars.css

@@ -1,5 +1,6 @@
 :root {--wb-c-form-choice-inputWrapper-layout-padding: var(--wb-sizing-size_0);
 --wb-c-form-choice-inputWrapper-layout-margin: var(--wb-sizing-size_0);
+--wb-c-form-description-color-foreground: var(--wb-semanticColor-core-foreground-neutral-default);
 --wb-c-form-field-border-radius: var(--wb-border-radius-radius_040);
 --wb-c-form-field-border-width-error: var(--wb-border-width-thin);
 --wb-c-form-field-border-width-press: var(--wb-border-width-none);
@@ -9,6 +10,7 @@
 
 [data-wb-theme='thunderblocks'] {--wb-c-form-choice-inputWrapper-layout-padding: var(--wb-sizing-size_040);
 --wb-c-form-choice-inputWrapper-layout-margin: calc(var(--wb-sizing-size_040) * -1);
+--wb-c-form-description-color-foreground: var(--wb-semanticColor-core-foreground-neutral-subtle);
 --wb-c-form-field-border-radius: var(--wb-border-radius-radius_080);
 --wb-c-form-field-border-width-error: var(--wb-border-width-medium);
 --wb-c-form-field-border-width-press: var(--wb-border-width-thin);

package/dist/es/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useId } from 'react';
 import { StyleSheet } from 'aphrodite';
 import { addStyle, View, Id, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
-import { sizing, border, mapValuesToCssVars, semanticColor, spacing, font } from '@khanacademy/wonder-blocks-tokens';
+import { sizing, semanticColor, border, mapValuesToCssVars, spacing, font } from '@khanacademy/wonder-blocks-tokens';
 import { BodyText, styles as styles$7, LabelMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
@@ -11,7 +11,7 @@ import minusIcon from '@phosphor-icons/core/bold/minus-bold.svg';
 import { focusStyles } from '@khanacademy/wonder-blocks-styles';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 
-var themeDefault = {choice:{inputWrapper:{layout:{padding:sizing.size_0,margin:sizing.size_0}}},field:{border:{radius:border.radius.radius_040,width:{error:border.width.thin,press:border.width.none}},sizing:{height:sizing.size_400},layout:{paddingBlock:sizing.size_100,paddingInline:sizing.size_160}}};
+var themeDefault = {choice:{inputWrapper:{layout:{padding:sizing.size_0,margin:sizing.size_0}}},description:{color:{foreground:semanticColor.core.foreground.neutral.default}},field:{border:{radius:border.radius.radius_040,width:{error:border.width.thin,press:border.width.none}},sizing:{height:sizing.size_400},layout:{paddingBlock:sizing.size_100,paddingInline:sizing.size_160}}};
 
 var theme = mapValuesToCssVars(themeDefault,"--wb-c-form-");
 
@@ -21,7 +21,7 @@ function mapCheckedToAriaChecked(value){switch(value){case true:return "true";ca
 
 const StyledInput$1=addStyle("input");const RadioCore=React.forwardRef(function RadioCore(props,ref){const innerRef=React.useRef(null);const handleChange=()=>{return};const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const stateStyles=_generateStyles(checked,error,disabled);const defaultStyle=[sharedStyles.inputReset,sharedStyles.default,stateStyles.default];const wrapperStyle=[sharedStyles.inputWrapper,stateStyles.inputWrapper];const handleWrapperClick=e=>{if(!disabled&&e.target!==innerRef?.current){innerRef?.current?.click();}};return jsx(React.Fragment,{children:jsxs(View,{style:wrapperStyle,onClick:handleWrapperClick,children:[jsx(StyledInput$1,{...sharedProps,type:"radio","aria-invalid":error,checked:checked??undefined,disabled:disabled,id:id,name:groupName,onChange:handleChange,style:defaultStyle,"data-testid":testId,ref:node=>{innerRef.current=node;if(typeof ref==="function"){ref(node);}else if(ref!=null){ref.current=node;}}}),disabled&&checked&&jsx("span",{style:stateStyles.disabledChecked})]})})});const sharedStyles=StyleSheet.create({inputWrapper:{padding:theme.choice.inputWrapper.layout.padding,margin:theme.choice.inputWrapper.layout.margin,position:"relative"},inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:baseStyles.choice.sizing.size,width:baseStyles.choice.sizing.size,minHeight:baseStyles.choice.sizing.size,minWidth:baseStyles.choice.sizing.size,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:baseStyles.radio.border.width.default,borderRadius:baseStyles.radio.border.radius.default}});const styles$5={};const _generateStyles=(checked,error,disabled)=>{const styleKey=`${String(checked)}-${String(error)}-${String(disabled)}`;if(styles$5[styleKey]){return styles$5[styleKey]}let newStyles={};const currentState=error?"error":disabled?"disabled":"default";if(checked){const checkedStyles=colorStates.radio.checked[currentState];newStyles={inputWrapper:{":hover input:not([disabled])":{outline:`${border.width.medium} solid ${checkedStyles.hover.border}`,outlineOffset:1}},default:{backgroundColor:checkedStyles.rest.background,borderColor:checkedStyles.rest.border,borderWidth:`calc(${baseStyles.choice.sizing.size} / 4)`,":focus-visible:not([disabled])":focusStyles.focus[":focus-visible"],":active:not([disabled])":{outline:`${border.width.medium} solid ${checkedStyles.press.border}`,outlineOffset:1,borderColor:checkedStyles.press.border}},disabledChecked:{position:"absolute",top:`calc(${baseStyles.choice.sizing.size} * .25 + ${theme.choice.inputWrapper.layout.padding})`,left:`calc(${baseStyles.choice.sizing.size} * .25 + ${theme.choice.inputWrapper.layout.padding})`,height:`calc(${baseStyles.choice.sizing.size} / 2)`,width:`calc(${baseStyles.choice.sizing.size} / 2)`,borderRadius:baseStyles.radio.border.radius.default,backgroundColor:checkedStyles.rest.background}};}else {const uncheckedStyles=colorStates.radio.unchecked[currentState];newStyles={inputWrapper:{":hover input:not([disabled])":{backgroundColor:uncheckedStyles.hover.background,outline:`${border.width.medium} solid ${uncheckedStyles.hover.border}`,outlineOffset:-1}},default:{backgroundColor:uncheckedStyles.rest.background,borderColor:uncheckedStyles.rest.border,":focus-visible:not([disabled])":focusStyles.focus[":focus-visible"],":active:not([disabled])":{backgroundColor:uncheckedStyles.press.background,outline:`${border.width.medium} solid ${uncheckedStyles.press.border}`,outlineOffset:-1}}};}styles$5[styleKey]=StyleSheet.create(newStyles);return styles$5[styleKey]};
 
-const ChoiceInternal=React.forwardRef(function ChoiceInternal(props,ref){const{checked,description,disabled=false,error=false,id,label,onChange,style,className,variant,...coreProps}=props;const handleClick=()=>{if(variant==="radio"&&checked){return}onChange(!checked);};const getChoiceCoreComponent=()=>{if(variant==="radio"){return RadioCore}else {return CheckboxCore}};const getLabel=id=>{return jsx(BodyText,{tag:"div",weight:"semi",style:[styles$4.label,disabled&&styles$4.disabledLabel],children:jsx("label",{htmlFor:id,children:label})})};const getDescription=id=>{return jsx(BodyText,{size:"small",style:styles$4.description,id:id,children:description})};const ChoiceCore=getChoiceCoreComponent();return jsx(Id,{id:id,children:uniqueId=>{const descriptionId=description?`${uniqueId}-description`:undefined;return jsxs(View,{style:style,className:className,children:[jsxs(View,{style:styles$4.wrapper,tabIndex:-1,children:[jsx(View,{style:[styles$4.choiceWrapper],children:jsx(ChoiceCore,{...coreProps,id:uniqueId,checked:checked,"aria-describedby":descriptionId,onClick:handleClick,disabled:disabled,error:error,ref:ref})}),label&&getLabel(uniqueId)]}),description&&getDescription(descriptionId)]})}})});const styles$4=StyleSheet.create({wrapper:{gap:spacing.xSmall_8,lineHeight:font.body.lineHeight.small,flexDirection:"row",alignItems:"flex-start",outline:"none"},choiceWrapper:{display:"block",marginBlockStart:sizing.size_010},label:{color:semanticColor.core.foreground.neutral.strong,lineHeight:font.body.lineHeight.small},disabledLabel:{color:semanticColor.core.foreground.disabled.subtle},description:{marginLeft:spacing.medium_16+spacing.xSmall_8,marginTop:spacing.xxxSmall_4,color:semanticColor.text.secondary}});
+const ChoiceInternal=React.forwardRef(function ChoiceInternal(props,ref){const{checked,description,disabled=false,error=false,id,label,onChange,style,className,variant,...coreProps}=props;const handleClick=()=>{if(variant==="radio"&&checked){return}onChange(!checked);};const getChoiceCoreComponent=()=>{if(variant==="radio"){return RadioCore}else {return CheckboxCore}};const getLabel=id=>{return jsx(BodyText,{tag:"div",weight:"semi",style:[styles$4.label,disabled&&styles$4.disabledLabel],children:jsx("label",{htmlFor:id,children:label})})};const getDescription=id=>{return jsx(BodyText,{size:"small",style:styles$4.description,id:id,children:description})};const ChoiceCore=getChoiceCoreComponent();return jsx(Id,{id:id,children:uniqueId=>{const descriptionId=description?`${uniqueId}-description`:undefined;return jsxs(View,{style:style,className:className,children:[jsxs(View,{style:styles$4.wrapper,tabIndex:-1,children:[jsx(View,{style:[styles$4.choiceWrapper],children:jsx(ChoiceCore,{...coreProps,id:uniqueId,checked:checked,"aria-describedby":descriptionId,onClick:handleClick,disabled:disabled,error:error,ref:ref})}),label&&getLabel(uniqueId)]}),description&&getDescription(descriptionId)]})}})});const styles$4=StyleSheet.create({wrapper:{gap:spacing.xSmall_8,lineHeight:font.body.lineHeight.small,flexDirection:"row",alignItems:"flex-start",outline:"none"},choiceWrapper:{display:"block",marginBlockStart:sizing.size_010},label:{color:semanticColor.core.foreground.neutral.strong,lineHeight:font.body.lineHeight.small},disabledLabel:{color:semanticColor.core.foreground.disabled.subtle},description:{marginLeft:spacing.medium_16+spacing.xSmall_8,marginTop:spacing.xxxSmall_4,color:theme.description.color.foreground}});
 
 const Checkbox=React.forwardRef(function Checkbox(props,ref){const{disabled=false,error=false}=props;return jsx(ChoiceInternal,{...props,variant:"checkbox",disabled:disabled,error:error,ref:ref})});
 
@@ -29,7 +29,7 @@ const Radio=React.forwardRef(function Radio(props,ref){const{disabled=false,erro
 
 const Choice=React.forwardRef(function Choice(props,ref){const{checked=false,disabled=false,onChange=()=>{},value,variant,...remainingProps}=props;const getChoiceComponent=variant=>{if(variant==="checkbox"){return Checkbox}else {return Radio}};const ChoiceComponent=getChoiceComponent(variant);return jsx(ChoiceComponent,{...remainingProps,checked:checked,disabled:disabled,onChange:onChange,ref:ref})});
 
-const styles$3=StyleSheet.create({fieldset:{display:"flex",flexDirection:"column",border:"none",padding:0,margin:0},legend:{padding:0,width:"100%"},description:{marginTop:spacing.xxxSmall_4,color:semanticColor.text.secondary},error:{marginTop:spacing.xxxSmall_4,color:semanticColor.status.critical.foreground},defaultLineGap:{marginTop:spacing.xSmall_8}});
+const styles$3=StyleSheet.create({fieldset:{display:"flex",flexDirection:"column",border:"none",padding:0,margin:0},legend:{padding:0,width:"100%"},description:{marginTop:spacing.xxxSmall_4,color:theme.description.color.foreground},error:{marginTop:spacing.xxxSmall_4,color:semanticColor.status.critical.foreground},defaultLineGap:{marginTop:spacing.xSmall_8}});
 
 const StyledFieldset$1=addStyle("fieldset");const StyledLegend$1=addStyle("legend");const CheckboxGroup=React.forwardRef(function CheckboxGroup(props,ref){const{children,label,description,errorMessage,groupName,onChange,selectedValues,style,testId}=props;const handleChange=(changedValue,originalCheckedState)=>{if(originalCheckedState){const index=selectedValues.indexOf(changedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,changedValue]);}};const allChildren=React.Children.toArray(children).filter(Boolean);return jsxs(StyledFieldset$1,{"data-testid":testId,style:[styles$3.fieldset,style],ref:ref,children:[label&&jsx(StyledLegend$1,{style:styles$3.legend,children:jsx(BodyText,{tag:"span",children:label})}),description&&jsx(BodyText,{size:"small",tag:"span",style:styles$3.description,children:description}),errorMessage&&jsx(BodyText,{size:"small",tag:"span",style:styles$3.error,children:errorMessage}),(label||description||errorMessage)&&jsx(Strut,{size:spacing.small_12}),allChildren.map((child,index)=>{const{style,value}=child.props;const checked=selectedValues.includes(value);return React.cloneElement(child,{checked:checked,error:!!errorMessage,groupName:groupName,id:`${groupName}-${value}`,key:value,onChange:()=>handleChange(value,checked),style:[index>0&&styles$3.defaultLineGap,style],variant:"checkbox"})})]})});
 
@@ -39,7 +39,7 @@ const defaultErrorMessage="This field is required.";const useFieldValidation=({v
 
 const StyledInput=addStyle("input");const TextField=props=>{const{id,type="text",value,name,disabled=false,error,validate,onValidate,required,placeholder,style,testId,readOnly,autoFocus,autoComplete,forwardedRef,instantValidation=true,onKeyDown,onChange,onFocus,onBlur,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,required,disabled,instantValidation,validate,onValidate});const hasError=error||!!errorMessage;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);};const handleFocus=event=>{if(onFocus){onFocus(event);}};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};return jsx(Id,{id:id,children:uniqueId=>jsx(StyledInput,{style:[styles$2.input,styles$7.BodyTextMediumMediumWeight,styles$2.default,disabled&&styles$2.disabled,hasError&&styles$2.error,readOnly&&styles$2.readOnly,style],id:uniqueId,type:type,placeholder:placeholder,value:value,name:name,"aria-disabled":disabled,"aria-required":!!required,onChange:handleChange,onKeyDown:disabled?undefined:onKeyDown,onFocus:handleFocus,onBlur:handleBlur,"data-testid":testId,readOnly:readOnly||disabled,autoFocus:autoFocus,autoComplete:autoComplete,ref:forwardedRef,"aria-invalid":hasError,...otherProps})})};const styles$2=StyleSheet.create({input:{width:"100%",height:theme.field.sizing.height,borderRadius:theme.field.border.radius,boxSizing:"border-box",paddingInline:theme.field.layout.paddingInline,paddingBlock:theme.field.layout.paddingBlock,margin:sizing.size_0},readOnly:{background:semanticColor.input.readOnly.background,color:semanticColor.input.readOnly.text},default:{background:semanticColor.input.default.background,border:`${border.width.thin} solid ${semanticColor.input.default.border}`,color:semanticColor.input.default.foreground,"::placeholder":{color:semanticColor.input.default.placeholder},...focusStyles.focus,[":active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:`0 0 0 ${theme.field.border.width.press} ${semanticColor.input.default.border}`}},error:{background:semanticColor.input.error.background,border:`${theme.field.border.width.error} solid ${semanticColor.input.error.border}`,color:semanticColor.input.error.foreground,"::placeholder":{color:semanticColor.input.default.placeholder}},disabled:{background:semanticColor.input.disabled.background,border:`${border.width.thin} solid ${semanticColor.input.disabled.border}`,color:semanticColor.input.disabled.foreground,"::placeholder":{color:semanticColor.input.disabled.placeholder},cursor:"not-allowed"}});var TextField$1 = React.forwardRef((props,ref)=>jsx(TextField,{...props,forwardedRef:ref}));
 
-const StyledSpan=addStyle("span");class FieldHeading extends React.Component{renderLabel(){const{label,id,required,testId}=this.props;const requiredIcon=jsxs(StyledSpan,{style:styles$1.required,"aria-hidden":true,children:[" ","*"]});return jsxs(React.Fragment,{children:[jsxs(LabelMedium,{style:styles$1.label,tag:"label",htmlFor:id&&`${id}-field`,testId:testId&&`${testId}-label`,children:[label,required&&requiredIcon]}),jsx(Strut,{size:spacing.xxxSmall_4})]})}maybeRenderDescription(){const{description,testId}=this.props;if(!description){return null}return jsxs(React.Fragment,{children:[jsx(LabelSmall,{style:styles$1.description,testId:testId&&`${testId}-description`,children:description}),jsx(Strut,{size:spacing.xxxSmall_4})]})}maybeRenderError(){const{error,id,testId}=this.props;if(!error){return null}return jsxs(React.Fragment,{children:[jsx(Strut,{size:spacing.small_12}),jsx(LabelSmall,{style:styles$1.error,role:"alert",id:id&&`${id}-error`,testId:testId&&`${testId}-error`,children:error})]})}render(){const{field,style}=this.props;return jsxs(View,{style:style,children:[this.renderLabel(),this.maybeRenderDescription(),jsx(Strut,{size:spacing.xSmall_8}),field,this.maybeRenderError()]})}}const styles$1=StyleSheet.create({label:{color:semanticColor.text.primary},description:{color:semanticColor.text.secondary},error:{color:semanticColor.status.critical.foreground},required:{color:semanticColor.status.critical.foreground}});
+const StyledSpan=addStyle("span");class FieldHeading extends React.Component{renderLabel(){const{label,id,required,testId}=this.props;const requiredIcon=jsxs(StyledSpan,{style:styles$1.required,"aria-hidden":true,children:[" ","*"]});return jsxs(React.Fragment,{children:[jsxs(LabelMedium,{style:styles$1.label,tag:"label",htmlFor:id&&`${id}-field`,testId:testId&&`${testId}-label`,children:[label,required&&requiredIcon]}),jsx(Strut,{size:spacing.xxxSmall_4})]})}maybeRenderDescription(){const{description,testId}=this.props;if(!description){return null}return jsxs(React.Fragment,{children:[jsx(LabelSmall,{style:styles$1.description,testId:testId&&`${testId}-description`,children:description}),jsx(Strut,{size:spacing.xxxSmall_4})]})}maybeRenderError(){const{error,id,testId}=this.props;if(!error){return null}return jsxs(React.Fragment,{children:[jsx(Strut,{size:spacing.small_12}),jsx(LabelSmall,{style:styles$1.error,role:"alert",id:id&&`${id}-error`,testId:testId&&`${testId}-error`,children:error})]})}render(){const{field,style}=this.props;return jsxs(View,{style:style,children:[this.renderLabel(),this.maybeRenderDescription(),jsx(Strut,{size:spacing.xSmall_8}),field,this.maybeRenderError()]})}}const styles$1=StyleSheet.create({label:{color:semanticColor.core.foreground.neutral.strong},description:{color:theme.description.color.foreground},error:{color:semanticColor.status.critical.foreground},required:{color:semanticColor.status.critical.foreground}});
 
 class LabeledTextField extends React.Component{render(){const{id,type,label,description,value,disabled,required,validate,onChange,onKeyDown,placeholder,style,testId,readOnly,autoComplete,forwardedRef,ariaDescribedby,name,onValidate,onFocus,onBlur,...otherProps}=this.props;return jsx(Id,{id:id,children:uniqueId=>jsx(FieldHeading,{id:uniqueId,testId:testId,style:style,field:jsx(TextField$1,{id:`${uniqueId}-field`,"aria-describedby":ariaDescribedby?ariaDescribedby:`${uniqueId}-error`,"aria-required":required?"true":"false",required:required,testId:testId&&`${testId}-field`,type:type,value:value,placeholder:placeholder,disabled:disabled,validate:validate,onValidate:this.handleValidate,onChange:onChange,onKeyDown:onKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,readOnly:readOnly,autoComplete:autoComplete,ref:forwardedRef,name:name,...otherProps}),label:label,description:description,required:!!required,error:!this.state.focused&&this.state.error||""})})}constructor(props){super(props),this.handleValidate=errorMessage=>{const{onValidate}=this.props;this.setState({error:errorMessage},()=>{if(onValidate){onValidate(errorMessage);}});},this.handleFocus=event=>{const{onFocus}=this.props;this.setState({focused:true},()=>{if(onFocus){onFocus(event);}});},this.handleBlur=event=>{const{onBlur}=this.props;this.setState({focused:false},()=>{if(onBlur){onBlur(event);}});};this.state={error:null,focused:false};}}LabeledTextField.defaultProps={type:"text",disabled:false};var labeledTextField = React.forwardRef((props,ref)=>jsx(LabeledTextField,{...props,forwardedRef:ref}));
 

package/dist/index.js

@@ -38,7 +38,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var checkIcon__default = /*#__PURE__*/_interopDefaultLegacy(checkIcon);
 var minusIcon__default = /*#__PURE__*/_interopDefaultLegacy(minusIcon);
 
-var themeDefault = {choice:{inputWrapper:{layout:{padding:wonderBlocksTokens.sizing.size_0,margin:wonderBlocksTokens.sizing.size_0}}},field:{border:{radius:wonderBlocksTokens.border.radius.radius_040,width:{error:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.none}},sizing:{height:wonderBlocksTokens.sizing.size_400},layout:{paddingBlock:wonderBlocksTokens.sizing.size_100,paddingInline:wonderBlocksTokens.sizing.size_160}}};
+var themeDefault = {choice:{inputWrapper:{layout:{padding:wonderBlocksTokens.sizing.size_0,margin:wonderBlocksTokens.sizing.size_0}}},description:{color:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.default}},field:{border:{radius:wonderBlocksTokens.border.radius.radius_040,width:{error:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.none}},sizing:{height:wonderBlocksTokens.sizing.size_400},layout:{paddingBlock:wonderBlocksTokens.sizing.size_100,paddingInline:wonderBlocksTokens.sizing.size_160}}};
 
 var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-form-");
 
@@ -48,7 +48,7 @@ function mapCheckedToAriaChecked(value){switch(value){case true:return "true";ca
 
 const StyledInput$1=wonderBlocksCore.addStyle("input");const RadioCore=React__namespace.forwardRef(function RadioCore(props,ref){const innerRef=React__namespace.useRef(null);const handleChange=()=>{return};const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const stateStyles=_generateStyles(checked,error,disabled);const defaultStyle=[sharedStyles.inputReset,sharedStyles.default,stateStyles.default];const wrapperStyle=[sharedStyles.inputWrapper,stateStyles.inputWrapper];const handleWrapperClick=e=>{if(!disabled&&e.target!==innerRef?.current){innerRef?.current?.click();}};return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsxs(wonderBlocksCore.View,{style:wrapperStyle,onClick:handleWrapperClick,children:[jsxRuntime.jsx(StyledInput$1,{...sharedProps,type:"radio","aria-invalid":error,checked:checked??undefined,disabled:disabled,id:id,name:groupName,onChange:handleChange,style:defaultStyle,"data-testid":testId,ref:node=>{innerRef.current=node;if(typeof ref==="function"){ref(node);}else if(ref!=null){ref.current=node;}}}),disabled&&checked&&jsxRuntime.jsx("span",{style:stateStyles.disabledChecked})]})})});const sharedStyles=aphrodite.StyleSheet.create({inputWrapper:{padding:theme.choice.inputWrapper.layout.padding,margin:theme.choice.inputWrapper.layout.margin,position:"relative"},inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:baseStyles.choice.sizing.size,width:baseStyles.choice.sizing.size,minHeight:baseStyles.choice.sizing.size,minWidth:baseStyles.choice.sizing.size,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:baseStyles.radio.border.width.default,borderRadius:baseStyles.radio.border.radius.default}});const styles$5={};const _generateStyles=(checked,error,disabled)=>{const styleKey=`${String(checked)}-${String(error)}-${String(disabled)}`;if(styles$5[styleKey]){return styles$5[styleKey]}let newStyles={};const currentState=error?"error":disabled?"disabled":"default";if(checked){const checkedStyles=colorStates.radio.checked[currentState];newStyles={inputWrapper:{":hover input:not([disabled])":{outline:`${wonderBlocksTokens.border.width.medium} solid ${checkedStyles.hover.border}`,outlineOffset:1}},default:{backgroundColor:checkedStyles.rest.background,borderColor:checkedStyles.rest.border,borderWidth:`calc(${baseStyles.choice.sizing.size} / 4)`,":focus-visible:not([disabled])":wonderBlocksStyles.focusStyles.focus[":focus-visible"],":active:not([disabled])":{outline:`${wonderBlocksTokens.border.width.medium} solid ${checkedStyles.press.border}`,outlineOffset:1,borderColor:checkedStyles.press.border}},disabledChecked:{position:"absolute",top:`calc(${baseStyles.choice.sizing.size} * .25 + ${theme.choice.inputWrapper.layout.padding})`,left:`calc(${baseStyles.choice.sizing.size} * .25 + ${theme.choice.inputWrapper.layout.padding})`,height:`calc(${baseStyles.choice.sizing.size} / 2)`,width:`calc(${baseStyles.choice.sizing.size} / 2)`,borderRadius:baseStyles.radio.border.radius.default,backgroundColor:checkedStyles.rest.background}};}else {const uncheckedStyles=colorStates.radio.unchecked[currentState];newStyles={inputWrapper:{":hover input:not([disabled])":{backgroundColor:uncheckedStyles.hover.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${uncheckedStyles.hover.border}`,outlineOffset:-1}},default:{backgroundColor:uncheckedStyles.rest.background,borderColor:uncheckedStyles.rest.border,":focus-visible:not([disabled])":wonderBlocksStyles.focusStyles.focus[":focus-visible"],":active:not([disabled])":{backgroundColor:uncheckedStyles.press.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${uncheckedStyles.press.border}`,outlineOffset:-1}}};}styles$5[styleKey]=aphrodite.StyleSheet.create(newStyles);return styles$5[styleKey]};
 
-const ChoiceInternal=React__namespace.forwardRef(function ChoiceInternal(props,ref){const{checked,description,disabled=false,error=false,id,label,onChange,style,className,variant,...coreProps}=props;const handleClick=()=>{if(variant==="radio"&&checked){return}onChange(!checked);};const getChoiceCoreComponent=()=>{if(variant==="radio"){return RadioCore}else {return CheckboxCore}};const getLabel=id=>{return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"div",weight:"semi",style:[styles$4.label,disabled&&styles$4.disabledLabel],children:jsxRuntime.jsx("label",{htmlFor:id,children:label})})};const getDescription=id=>{return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",style:styles$4.description,id:id,children:description})};const ChoiceCore=getChoiceCoreComponent();return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>{const descriptionId=description?`${uniqueId}-description`:undefined;return jsxRuntime.jsxs(wonderBlocksCore.View,{style:style,className:className,children:[jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles$4.wrapper,tabIndex:-1,children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$4.choiceWrapper],children:jsxRuntime.jsx(ChoiceCore,{...coreProps,id:uniqueId,checked:checked,"aria-describedby":descriptionId,onClick:handleClick,disabled:disabled,error:error,ref:ref})}),label&&getLabel(uniqueId)]}),description&&getDescription(descriptionId)]})}})});const styles$4=aphrodite.StyleSheet.create({wrapper:{gap:wonderBlocksTokens.spacing.xSmall_8,lineHeight:wonderBlocksTokens.font.body.lineHeight.small,flexDirection:"row",alignItems:"flex-start",outline:"none"},choiceWrapper:{display:"block",marginBlockStart:wonderBlocksTokens.sizing.size_010},label:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,lineHeight:wonderBlocksTokens.font.body.lineHeight.small},disabledLabel:{color:wonderBlocksTokens.semanticColor.core.foreground.disabled.subtle},description:{marginLeft:wonderBlocksTokens.spacing.medium_16+wonderBlocksTokens.spacing.xSmall_8,marginTop:wonderBlocksTokens.spacing.xxxSmall_4,color:wonderBlocksTokens.semanticColor.text.secondary}});
+const ChoiceInternal=React__namespace.forwardRef(function ChoiceInternal(props,ref){const{checked,description,disabled=false,error=false,id,label,onChange,style,className,variant,...coreProps}=props;const handleClick=()=>{if(variant==="radio"&&checked){return}onChange(!checked);};const getChoiceCoreComponent=()=>{if(variant==="radio"){return RadioCore}else {return CheckboxCore}};const getLabel=id=>{return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"div",weight:"semi",style:[styles$4.label,disabled&&styles$4.disabledLabel],children:jsxRuntime.jsx("label",{htmlFor:id,children:label})})};const getDescription=id=>{return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",style:styles$4.description,id:id,children:description})};const ChoiceCore=getChoiceCoreComponent();return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>{const descriptionId=description?`${uniqueId}-description`:undefined;return jsxRuntime.jsxs(wonderBlocksCore.View,{style:style,className:className,children:[jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles$4.wrapper,tabIndex:-1,children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$4.choiceWrapper],children:jsxRuntime.jsx(ChoiceCore,{...coreProps,id:uniqueId,checked:checked,"aria-describedby":descriptionId,onClick:handleClick,disabled:disabled,error:error,ref:ref})}),label&&getLabel(uniqueId)]}),description&&getDescription(descriptionId)]})}})});const styles$4=aphrodite.StyleSheet.create({wrapper:{gap:wonderBlocksTokens.spacing.xSmall_8,lineHeight:wonderBlocksTokens.font.body.lineHeight.small,flexDirection:"row",alignItems:"flex-start",outline:"none"},choiceWrapper:{display:"block",marginBlockStart:wonderBlocksTokens.sizing.size_010},label:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,lineHeight:wonderBlocksTokens.font.body.lineHeight.small},disabledLabel:{color:wonderBlocksTokens.semanticColor.core.foreground.disabled.subtle},description:{marginLeft:wonderBlocksTokens.spacing.medium_16+wonderBlocksTokens.spacing.xSmall_8,marginTop:wonderBlocksTokens.spacing.xxxSmall_4,color:theme.description.color.foreground}});
 
 const Checkbox=React__namespace.forwardRef(function Checkbox(props,ref){const{disabled=false,error=false}=props;return jsxRuntime.jsx(ChoiceInternal,{...props,variant:"checkbox",disabled:disabled,error:error,ref:ref})});
 
@@ -56,7 +56,7 @@ const Radio=React__namespace.forwardRef(function Radio(props,ref){const{disabled
 
 const Choice=React__namespace.forwardRef(function Choice(props,ref){const{checked=false,disabled=false,onChange=()=>{},value,variant,...remainingProps}=props;const getChoiceComponent=variant=>{if(variant==="checkbox"){return Checkbox}else {return Radio}};const ChoiceComponent=getChoiceComponent(variant);return jsxRuntime.jsx(ChoiceComponent,{...remainingProps,checked:checked,disabled:disabled,onChange:onChange,ref:ref})});
 
-const styles$3=aphrodite.StyleSheet.create({fieldset:{display:"flex",flexDirection:"column",border:"none",padding:0,margin:0},legend:{padding:0,width:"100%"},description:{marginTop:wonderBlocksTokens.spacing.xxxSmall_4,color:wonderBlocksTokens.semanticColor.text.secondary},error:{marginTop:wonderBlocksTokens.spacing.xxxSmall_4,color:wonderBlocksTokens.semanticColor.status.critical.foreground},defaultLineGap:{marginTop:wonderBlocksTokens.spacing.xSmall_8}});
+const styles$3=aphrodite.StyleSheet.create({fieldset:{display:"flex",flexDirection:"column",border:"none",padding:0,margin:0},legend:{padding:0,width:"100%"},description:{marginTop:wonderBlocksTokens.spacing.xxxSmall_4,color:theme.description.color.foreground},error:{marginTop:wonderBlocksTokens.spacing.xxxSmall_4,color:wonderBlocksTokens.semanticColor.status.critical.foreground},defaultLineGap:{marginTop:wonderBlocksTokens.spacing.xSmall_8}});
 
 const StyledFieldset$1=wonderBlocksCore.addStyle("fieldset");const StyledLegend$1=wonderBlocksCore.addStyle("legend");const CheckboxGroup=React__namespace.forwardRef(function CheckboxGroup(props,ref){const{children,label,description,errorMessage,groupName,onChange,selectedValues,style,testId}=props;const handleChange=(changedValue,originalCheckedState)=>{if(originalCheckedState){const index=selectedValues.indexOf(changedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,changedValue]);}};const allChildren=React__namespace.Children.toArray(children).filter(Boolean);return jsxRuntime.jsxs(StyledFieldset$1,{"data-testid":testId,style:[styles$3.fieldset,style],ref:ref,children:[label&&jsxRuntime.jsx(StyledLegend$1,{style:styles$3.legend,children:jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",children:label})}),description&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",tag:"span",style:styles$3.description,children:description}),errorMessage&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",tag:"span",style:styles$3.error,children:errorMessage}),(label||description||errorMessage)&&jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),allChildren.map((child,index)=>{const{style,value}=child.props;const checked=selectedValues.includes(value);return React__namespace.cloneElement(child,{checked:checked,error:!!errorMessage,groupName:groupName,id:`${groupName}-${value}`,key:value,onChange:()=>handleChange(value,checked),style:[index>0&&styles$3.defaultLineGap,style],variant:"checkbox"})})]})});
 
@@ -66,7 +66,7 @@ const defaultErrorMessage="This field is required.";const useFieldValidation=({v
 
 const StyledInput=wonderBlocksCore.addStyle("input");const TextField=props=>{const{id,type="text",value,name,disabled=false,error,validate,onValidate,required,placeholder,style,testId,readOnly,autoFocus,autoComplete,forwardedRef,instantValidation=true,onKeyDown,onChange,onFocus,onBlur,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,required,disabled,instantValidation,validate,onValidate});const hasError=error||!!errorMessage;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);};const handleFocus=event=>{if(onFocus){onFocus(event);}};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>jsxRuntime.jsx(StyledInput,{style:[styles$2.input,wonderBlocksTypography.styles.BodyTextMediumMediumWeight,styles$2.default,disabled&&styles$2.disabled,hasError&&styles$2.error,readOnly&&styles$2.readOnly,style],id:uniqueId,type:type,placeholder:placeholder,value:value,name:name,"aria-disabled":disabled,"aria-required":!!required,onChange:handleChange,onKeyDown:disabled?undefined:onKeyDown,onFocus:handleFocus,onBlur:handleBlur,"data-testid":testId,readOnly:readOnly||disabled,autoFocus:autoFocus,autoComplete:autoComplete,ref:forwardedRef,"aria-invalid":hasError,...otherProps})})};const styles$2=aphrodite.StyleSheet.create({input:{width:"100%",height:theme.field.sizing.height,borderRadius:theme.field.border.radius,boxSizing:"border-box",paddingInline:theme.field.layout.paddingInline,paddingBlock:theme.field.layout.paddingBlock,margin:wonderBlocksTokens.sizing.size_0},readOnly:{background:wonderBlocksTokens.semanticColor.input.readOnly.background,color:wonderBlocksTokens.semanticColor.input.readOnly.text},default:{background:wonderBlocksTokens.semanticColor.input.default.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.default.border}`,color:wonderBlocksTokens.semanticColor.input.default.foreground,"::placeholder":{color:wonderBlocksTokens.semanticColor.input.default.placeholder},...wonderBlocksStyles.focusStyles.focus,[":active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:`0 0 0 ${theme.field.border.width.press} ${wonderBlocksTokens.semanticColor.input.default.border}`}},error:{background:wonderBlocksTokens.semanticColor.input.error.background,border:`${theme.field.border.width.error} solid ${wonderBlocksTokens.semanticColor.input.error.border}`,color:wonderBlocksTokens.semanticColor.input.error.foreground,"::placeholder":{color:wonderBlocksTokens.semanticColor.input.default.placeholder}},disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.disabled.border}`,color:wonderBlocksTokens.semanticColor.input.disabled.foreground,"::placeholder":{color:wonderBlocksTokens.semanticColor.input.disabled.placeholder},cursor:"not-allowed"}});var TextField$1 = React__namespace.forwardRef((props,ref)=>jsxRuntime.jsx(TextField,{...props,forwardedRef:ref}));
 
-const StyledSpan=wonderBlocksCore.addStyle("span");class FieldHeading extends React__namespace.Component{renderLabel(){const{label,id,required,testId}=this.props;const requiredIcon=jsxRuntime.jsxs(StyledSpan,{style:styles$1.required,"aria-hidden":true,children:[" ","*"]});return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsxs(wonderBlocksTypography.LabelMedium,{style:styles$1.label,tag:"label",htmlFor:id&&`${id}-field`,testId:testId&&`${testId}-label`,children:[label,required&&requiredIcon]}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4})]})}maybeRenderDescription(){const{description,testId}=this.props;if(!description){return null}return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:styles$1.description,testId:testId&&`${testId}-description`,children:description}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4})]})}maybeRenderError(){const{error,id,testId}=this.props;if(!error){return null}return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:styles$1.error,role:"alert",id:id&&`${id}-error`,testId:testId&&`${testId}-error`,children:error})]})}render(){const{field,style}=this.props;return jsxRuntime.jsxs(wonderBlocksCore.View,{style:style,children:[this.renderLabel(),this.maybeRenderDescription(),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),field,this.maybeRenderError()]})}}const styles$1=aphrodite.StyleSheet.create({label:{color:wonderBlocksTokens.semanticColor.text.primary},description:{color:wonderBlocksTokens.semanticColor.text.secondary},error:{color:wonderBlocksTokens.semanticColor.status.critical.foreground},required:{color:wonderBlocksTokens.semanticColor.status.critical.foreground}});
+const StyledSpan=wonderBlocksCore.addStyle("span");class FieldHeading extends React__namespace.Component{renderLabel(){const{label,id,required,testId}=this.props;const requiredIcon=jsxRuntime.jsxs(StyledSpan,{style:styles$1.required,"aria-hidden":true,children:[" ","*"]});return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsxs(wonderBlocksTypography.LabelMedium,{style:styles$1.label,tag:"label",htmlFor:id&&`${id}-field`,testId:testId&&`${testId}-label`,children:[label,required&&requiredIcon]}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4})]})}maybeRenderDescription(){const{description,testId}=this.props;if(!description){return null}return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:styles$1.description,testId:testId&&`${testId}-description`,children:description}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4})]})}maybeRenderError(){const{error,id,testId}=this.props;if(!error){return null}return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:styles$1.error,role:"alert",id:id&&`${id}-error`,testId:testId&&`${testId}-error`,children:error})]})}render(){const{field,style}=this.props;return jsxRuntime.jsxs(wonderBlocksCore.View,{style:style,children:[this.renderLabel(),this.maybeRenderDescription(),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),field,this.maybeRenderError()]})}}const styles$1=aphrodite.StyleSheet.create({label:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong},description:{color:theme.description.color.foreground},error:{color:wonderBlocksTokens.semanticColor.status.critical.foreground},required:{color:wonderBlocksTokens.semanticColor.status.critical.foreground}});
 
 class LabeledTextField extends React__namespace.Component{render(){const{id,type,label,description,value,disabled,required,validate,onChange,onKeyDown,placeholder,style,testId,readOnly,autoComplete,forwardedRef,ariaDescribedby,name,onValidate,onFocus,onBlur,...otherProps}=this.props;return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>jsxRuntime.jsx(FieldHeading,{id:uniqueId,testId:testId,style:style,field:jsxRuntime.jsx(TextField$1,{id:`${uniqueId}-field`,"aria-describedby":ariaDescribedby?ariaDescribedby:`${uniqueId}-error`,"aria-required":required?"true":"false",required:required,testId:testId&&`${testId}-field`,type:type,value:value,placeholder:placeholder,disabled:disabled,validate:validate,onValidate:this.handleValidate,onChange:onChange,onKeyDown:onKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,readOnly:readOnly,autoComplete:autoComplete,ref:forwardedRef,name:name,...otherProps}),label:label,description:description,required:!!required,error:!this.state.focused&&this.state.error||""})})}constructor(props){super(props),this.handleValidate=errorMessage=>{const{onValidate}=this.props;this.setState({error:errorMessage},()=>{if(onValidate){onValidate(errorMessage);}});},this.handleFocus=event=>{const{onFocus}=this.props;this.setState({focused:true},()=>{if(onFocus){onFocus(event);}});},this.handleBlur=event=>{const{onBlur}=this.props;this.setState({focused:false},()=>{if(onBlur){onBlur(event);}});};this.state={error:null,focused:false};}}LabeledTextField.defaultProps={type:"text",disabled:false};var labeledTextField = React__namespace.forwardRef((props,ref)=>jsxRuntime.jsx(LabeledTextField,{...props,forwardedRef:ref}));
 

package/dist/theme/default.d.ts

@@ -7,6 +7,11 @@ declare const _default: {
             };
         };
     };
+    description: {
+        color: {
+            foreground: string;
+        };
+    };
     field: {
         border: {
             radius: string;

package/dist/theme/index.d.ts

@@ -7,6 +7,11 @@ declare const _default: {
             };
         };
     };
+    description: {
+        color: {
+            foreground: string;
+        };
+    };
     field: {
         border: {
             radius: string;

package/dist/theme/thunderblocks.d.ts

@@ -7,6 +7,11 @@ declare const _default: {
             };
         };
     };
+    description: {
+        color: {
+            foreground: string;
+        };
+    };
     field: {
         border: {
             radius: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "7.2.3",
+  "version": "7.2.5",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "exports": {
@@ -20,12 +20,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "7.1.16",
+    "@khanacademy/wonder-blocks-clickable": "7.1.18",
     "@khanacademy/wonder-blocks-core": "12.3.0",
-    "@khanacademy/wonder-blocks-icon": "5.2.10",
-    "@khanacademy/wonder-blocks-layout": "3.1.27",
-    "@khanacademy/wonder-blocks-tokens": "11.4.0",
-    "@khanacademy/wonder-blocks-typography": "4.2.12"
+    "@khanacademy/wonder-blocks-icon": "5.2.12",
+    "@khanacademy/wonder-blocks-layout": "3.1.29",
+    "@khanacademy/wonder-blocks-tokens": "12.0.0",
+    "@khanacademy/wonder-blocks-typography": "4.2.14"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",