@khanacademy/wonder-blocks-form 7.5.10 → 7.6.1

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

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-form@7.5.10 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-form
+> @khanacademy/wonder-blocks-form@7.6.1 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,36 @@
 # @khanacademy/wonder-blocks-form
 
+## 7.6.1
+
+### Patch Changes
+
+- 40cb70f: Add `require-logical-properties-for-rtl` ESLint rule to `eslint-plugin-wonder-blocks` recommended config, and migrate all Wonder Blocks component source files to use CSS logical properties for improved RTL layout support.
+- 40cb70f: Enable RTL logical-properties ESLint rule in recommended config
+- Updated dependencies [40cb70f]
+- Updated dependencies [40cb70f]
+- Updated dependencies [c97ece4]
+    - @khanacademy/wonder-blocks-core@12.4.4
+    - @khanacademy/wonder-blocks-clickable@8.2.0
+    - @khanacademy/wonder-blocks-icon@5.3.15
+    - @khanacademy/wonder-blocks-layout@3.1.52
+    - @khanacademy/wonder-blocks-typography@4.3.5
+
+## 7.6.0
+
+### Minor Changes
+
+- 27a211d: Add support for SYL Dark theme
+
+### Patch Changes
+
+- Updated dependencies [44bde5e]
+- Updated dependencies [27a211d]
+    - @khanacademy/wonder-blocks-tokens@16.5.0
+    - @khanacademy/wonder-blocks-clickable@8.1.10
+    - @khanacademy/wonder-blocks-icon@5.3.14
+    - @khanacademy/wonder-blocks-layout@3.1.51
+    - @khanacademy/wonder-blocks-typography@4.3.4
+
 ## 7.5.10
 
 ### Patch Changes

package/dist/css/vars.css

@@ -8,6 +8,16 @@
 --wb-c-form-field-layout-paddingBlock: var(--wb-sizing-size_100);
 --wb-c-form-field-layout-paddingInline: var(--wb-sizing-size_160);}
 
+[data-wb-theme='syl-dark'] {--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);
+--wb-c-form-field-sizing-height: var(--wb-sizing-size_440);
+--wb-c-form-field-layout-paddingBlock: var(--wb-sizing-size_100);
+--wb-c-form-field-layout-paddingInline: var(--wb-sizing-size_120);}
+
 [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);

package/dist/es/index.js

@@ -16,9 +16,9 @@ var theme = mapValuesToCssVars(themeDefault,"--wb-c-form-");
 
 const baseStyles={choice:{sizing:{size:sizing.size_160},checked:{border:semanticColor.input.checked.border},disabled:{border:semanticColor.input.disabled.border,background:semanticColor.input.disabled.background},error:{border:semanticColor.input.error.border,background:semanticColor.input.error.background},unchecked:{rest:{border:semanticColor.input.default.border,background:semanticColor.input.default.background},hover:{border:semanticColor.action.secondary.progressive.hover.border,background:semanticColor.action.secondary.progressive.hover.background},press:{border:semanticColor.action.secondary.progressive.press.border,background:semanticColor.action.secondary.progressive.press.background}}},radio:{border:{radius:{default:border.radius.radius_full},width:{default:border.width.thin}}},checkbox:{border:{radius:{default:border.radius.radius_040},width:{default:border.width.thin}},sizing:{checkSize:sizing.size_120},disabledChecked:{border:semanticColor.core.transparent,background:semanticColor.core.background.disabled.strong}},icon:{default:{foreground:semanticColor.core.foreground.knockout.default},disabled:{foreground:semanticColor.core.foreground.neutral.subtle}}};const colorStates={checkbox:{unchecked:{default:baseStyles.choice.unchecked,disabled:{rest:baseStyles.choice.disabled,hover:baseStyles.choice.disabled,press:baseStyles.choice.disabled},error:{rest:baseStyles.choice.error,hover:baseStyles.choice.error,press:{...baseStyles.choice.error,border:semanticColor.core.border.critical.strong}}},checked:{default:{rest:{border:semanticColor.core.transparent,background:semanticColor.input.checked.background},hover:{border:semanticColor.core.border.instructive.default},press:{border:semanticColor.input.checked.border,background:semanticColor.core.background.instructive.strong}},disabled:{rest:baseStyles.checkbox.disabledChecked,hover:baseStyles.checkbox.disabledChecked,press:baseStyles.checkbox.disabledChecked},error:{rest:{background:semanticColor.core.border.critical.default,border:semanticColor.core.border.critical.default},hover:{background:semanticColor.core.background.critical.default,border:semanticColor.core.border.critical.default},press:{background:semanticColor.core.background.critical.strong,border:semanticColor.core.border.critical.strong}}}},radio:{unchecked:{default:baseStyles.choice.unchecked,disabled:{rest:baseStyles.choice.disabled,hover:baseStyles.choice.disabled,press:baseStyles.choice.disabled},error:{rest:baseStyles.choice.error,hover:baseStyles.choice.error,press:{...baseStyles.choice.error,border:semanticColor.core.border.critical.strong}}},checked:{default:{rest:{border:semanticColor.input.checked.background,background:semanticColor.core.background.base.default},hover:baseStyles.choice.checked,press:{border:semanticColor.core.background.instructive.strong,background:semanticColor.core.background.instructive.strong}},error:{rest:baseStyles.choice.error,hover:baseStyles.choice.error,press:{...baseStyles.choice.error,background:semanticColor.core.background.critical.strong,border:semanticColor.core.border.critical.strong}},disabled:{rest:{border:semanticColor.core.border.disabled.default,background:semanticColor.core.background.base.default},hover:{border:semanticColor.core.border.disabled.strong,background:semanticColor.core.background.base.default},press:{border:semanticColor.core.border.disabled.strong,background:semanticColor.core.background.base.default}}}}};
 
-function mapCheckedToAriaChecked(value){switch(value){case true:return "true";case false:return "false";default:return "mixed"}}const StyledInput$2=addStyle("input");const CheckboxCore=React.forwardRef(function CheckboxCore(props,ref){const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const innerRef=React.useRef(null);React.useEffect(()=>{if(innerRef.current!=null){innerRef.current.indeterminate=checked==null;}},[checked,innerRef]);const handleChange=()=>{return};const stateStyles=_generateStyles$1(checked,error,disabled);const defaultStyle=[sharedStyles$1.inputReset,sharedStyles$1.default,stateStyles.default];const wrapperStyle=[sharedStyles$1.inputWrapper,stateStyles.inputWrapper];const checkboxIcon=jsx(PhosphorIcon,{color:disabled?baseStyles.icon.disabled.foreground:baseStyles.icon.default.foreground,icon:checked?checkIcon:minusIcon,size:"small",style:[sharedStyles$1.checkboxIcon,{width:baseStyles.checkbox.sizing.checkSize,height:baseStyles.checkbox.sizing.checkSize}]});const ariaChecked=mapCheckedToAriaChecked(checked);const handleWrapperClick=e=>{if(!disabled&&e.target!==innerRef.current){innerRef.current?.click();}};return jsx(React.Fragment,{children:jsxs(View,{style:wrapperStyle,onClick:handleWrapperClick,testId:"wb-checkbox-wrapper",children:[jsx(StyledInput$2,{...sharedProps,ref:node=>{innerRef.current=node;if(typeof ref==="function"){ref(node);}else if(ref!=null){ref.current=node;}},type:"checkbox","aria-checked":ariaChecked,"aria-invalid":error,checked:checked??undefined,disabled:disabled,id:id,name:groupName,onChange:handleChange,style:defaultStyle,"data-testid":testId}),checked||checked==null?checkboxIcon:jsx(Fragment,{})]})})});const sharedStyles$1=StyleSheet.create({inputWrapper:{margin:theme.choice.inputWrapper.layout.margin,padding:theme.choice.inputWrapper.layout.padding,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.checkbox.border.width.default,borderRadius:baseStyles.checkbox.border.radius.default},checkboxIcon:{position:"absolute",pointerEvents:"none",margin:`calc((${baseStyles.choice.sizing.size} - ${baseStyles.checkbox.sizing.checkSize}) / 2)`}});const styles$6={};const _generateStyles$1=(checked,error,disabled)=>{const styleKey=`${String(checked)}-${String(error)}-${String(disabled)}`;if(styles$6[styleKey]){return styles$6[styleKey]}const isCheckedOrIndeterminate=checked||checked==null;let stateStyles={};const currentState=error?"error":disabled?"disabled":"default";if(isCheckedOrIndeterminate){const checkedStyles=colorStates.checkbox.checked[currentState];stateStyles={inputWrapper:{":hover input:not([disabled])":{outline:`${border.width.medium} solid ${checkedStyles.hover.border}`,outlineOffset:1}},default:{backgroundColor:checkedStyles.rest.background,borderColor:checkedStyles.rest.border,":focus-visible:not([disabled])":focusStyles.focus[":focus-visible"],":active:not([disabled])":{outline:`${border.width.medium} solid ${checkedStyles.press.border}`,outlineOffset:1,background:checkedStyles.press.background,borderColor:checkedStyles.press.background}}};}else {const uncheckedStyles=colorStates.checkbox.unchecked[currentState];stateStyles={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},":active:not([disabled])":{backgroundColor:uncheckedStyles.press.background,outline:`${border.width.medium} solid ${uncheckedStyles.press.border}`,outlineOffset:-1}}};}styles$6[styleKey]=StyleSheet.create(stateStyles);return styles$6[styleKey]};
+function mapCheckedToAriaChecked(value){switch(value){case true:return "true";case false:return "false";default:return "mixed"}}const StyledInput$2=addStyle("input");const CheckboxCore=React.forwardRef(function CheckboxCore(props,ref){const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const innerRef=React.useRef(null);React.useEffect(()=>{if(innerRef.current!=null){innerRef.current.indeterminate=checked==null;}},[checked,innerRef]);const handleChange=()=>{return};const stateStyles=_generateStyles$1(checked,error,disabled);const defaultStyle=[sharedStyles$1.inputReset,sharedStyles$1.default,stateStyles.default];const wrapperStyle=[sharedStyles$1.inputWrapper,stateStyles.inputWrapper];const checkboxIcon=jsx(PhosphorIcon,{color:disabled?baseStyles.icon.disabled.foreground:baseStyles.icon.default.foreground,icon:checked?checkIcon:minusIcon,size:"small",style:[sharedStyles$1.checkboxIcon,{width:baseStyles.checkbox.sizing.checkSize,height:baseStyles.checkbox.sizing.checkSize}]});const ariaChecked=mapCheckedToAriaChecked(checked);const handleWrapperClick=e=>{if(!disabled&&e.target!==innerRef.current){innerRef.current?.click();}};return jsx(React.Fragment,{children:jsxs(View,{style:wrapperStyle,onClick:handleWrapperClick,testId:"wb-checkbox-wrapper",children:[jsx(StyledInput$2,{...sharedProps,ref:node=>{innerRef.current=node;if(typeof ref==="function"){ref(node);}else if(ref!=null){ref.current=node;}},type:"checkbox","aria-checked":ariaChecked,"aria-invalid":error,checked:checked??undefined,disabled:disabled,id:id,name:groupName,onChange:handleChange,style:defaultStyle,"data-testid":testId}),checked||checked==null?checkboxIcon:jsx(Fragment,{})]})})});const sharedStyles$1=StyleSheet.create({inputWrapper:{margin:theme.choice.inputWrapper.layout.margin,padding:theme.choice.inputWrapper.layout.padding,position:"relative"},inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:baseStyles.choice.sizing.size,width:baseStyles.choice.sizing.size,minBlockSize:baseStyles.choice.sizing.size,minInlineSize:baseStyles.choice.sizing.size,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:baseStyles.checkbox.border.width.default,borderRadius:baseStyles.checkbox.border.radius.default},checkboxIcon:{position:"absolute",pointerEvents:"none",margin:`calc((${baseStyles.choice.sizing.size} - ${baseStyles.checkbox.sizing.checkSize}) / 2)`}});const styles$6={};const _generateStyles$1=(checked,error,disabled)=>{const styleKey=`${String(checked)}-${String(error)}-${String(disabled)}`;if(styles$6[styleKey]){return styles$6[styleKey]}const isCheckedOrIndeterminate=checked||checked==null;let stateStyles={};const currentState=error?"error":disabled?"disabled":"default";if(isCheckedOrIndeterminate){const checkedStyles=colorStates.checkbox.checked[currentState];stateStyles={inputWrapper:{":hover input:not([disabled])":{outline:`${border.width.medium} solid ${checkedStyles.hover.border}`,outlineOffset:1}},default:{backgroundColor:checkedStyles.rest.background,borderColor:checkedStyles.rest.border,":focus-visible:not([disabled])":focusStyles.focus[":focus-visible"],":active:not([disabled])":{outline:`${border.width.medium} solid ${checkedStyles.press.border}`,outlineOffset:1,background:checkedStyles.press.background,borderColor:checkedStyles.press.background}}};}else {const uncheckedStyles=colorStates.checkbox.unchecked[currentState];stateStyles={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},":active:not([disabled])":{backgroundColor:uncheckedStyles.press.background,outline:`${border.width.medium} solid ${uncheckedStyles.press.border}`,outlineOffset:-1}}};}styles$6[styleKey]=StyleSheet.create(stateStyles);return styles$6[styleKey]};
 
-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 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,minBlockSize:baseStyles.choice.sizing.size,minInlineSize: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:sizing.size_080,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:{marginInlineStart:`calc(${sizing.size_160} + ${sizing.size_080})`,marginBlockStart:sizing.size_040,color:theme.description.color.foreground}});
 
@@ -42,6 +42,6 @@ const StyledSpan=addStyle("span");class FieldHeading extends React.Component{ren
 
 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}));
 
-const StyledTextarea=addStyle("textarea");function getHeightForNumberOfRows(rows){return `calc((${rows} * ${font.body.lineHeight.medium}) + (2 * ${theme.field.layout.paddingBlock}) + (2 * ${border.width.thin}))`}function getTextAreaHeight(textArea){const originalStyleHeightValue=textArea.style.getPropertyValue("height");const originalStyleHeightPriority=textArea.style.getPropertyPriority("height");const originalStyleOverflowValue=textArea.style.getPropertyValue("overflow");const originalStyleOverflowPriority=textArea.style.getPropertyPriority("overflow");textArea.style.setProperty("height","0px","important");textArea.style.setProperty("overflow","hidden","important");const computedStyle=getComputedStyle(textArea);const borderTop=computedStyle.borderTopWidth;const borderBottom=computedStyle.borderBottomWidth;const newHeight=`calc(${textArea.scrollHeight}px + ${borderTop} + ${borderBottom})`;if(originalStyleHeightValue){textArea.style.setProperty("height",originalStyleHeightValue,originalStyleHeightPriority);}else {textArea.style.removeProperty("height");}if(originalStyleOverflowValue){textArea.style.setProperty("overflow",originalStyleOverflowValue,originalStyleOverflowPriority);}else {textArea.style.removeProperty("overflow");}return newHeight}const TextArea=React.forwardRef(function TextArea(props,ref){const{onChange,value,placeholder,disabled,id,testId,style,readOnly,autoComplete,name,className,autoFocus,rows=2,spellCheck,wrap,minLength,maxLength,onClick,onKeyDown,onKeyUp,onFocus,onBlur,onPaste,validate,onValidate,required,resizeType,rootStyle,error,autoResize=false,maxRows=6,instantValidation=true,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,disabled,validate,onValidate,required,instantValidation});const textAreaContainerRef=React.useRef(null);const[height,setHeight]=React.useState("0px");const hasError=error||!!errorMessage;const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);if(autoResize){setHeight(getTextAreaHeight(event.target));}};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};useOnMountEffect(()=>{if(!autoResize){return}const ref=textAreaContainerRef.current?.children[0];if(ref&&window?.ResizeObserver){const observer=new window.ResizeObserver(([entry])=>{if(entry){setHeight(getTextAreaHeight(entry.target));}});observer.observe(ref);return ()=>{observer.disconnect();}}});const autoResizeStyles=[styles.autoResize,{height,maxHeight:getHeightForNumberOfRows(Math.max(maxRows,rows))}];React.useEffect(()=>{if(autoResize){setHeight(getTextAreaHeight(textAreaContainerRef.current?.children[0]));}},[autoResize,ref]);return jsx(View,{style:[{width:"100%"},rootStyle],ref:textAreaContainerRef,children:jsx(StyledTextarea,{id:uniqueId,"data-testid":testId,ref:ref,className:className,style:[styles.textarea,styles$7.BodyTextMediumMediumWeight,resizeType&&resizeStyles[resizeType],styles.default,disabled&&styles.disabled,hasError&&styles.error,readOnly&&styles.readOnly,rows&&{minHeight:getHeightForNumberOfRows(rows)},autoResize&&autoResizeStyles,style],value:value,onChange:handleChange,placeholder:placeholder,"aria-disabled":disabled,readOnly:readOnly||disabled,autoComplete:autoComplete,name:name,autoFocus:autoFocus,spellCheck:spellCheck,wrap:wrap,minLength:minLength,maxLength:maxLength,"aria-required":!!required,onClick:disabled?undefined:onClick,onKeyDown:disabled?undefined:onKeyDown,onKeyUp:disabled?undefined:onKeyUp,onFocus:onFocus,onBlur:handleBlur,onPaste:disabled?undefined:onPaste,required:!!required,...otherProps,"aria-invalid":hasError})})});const styles=StyleSheet.create({textarea:{borderRadius:theme.field.border.radius,boxSizing:"border-box",paddingInline:theme.field.layout.paddingInline,paddingBlock:theme.field.layout.paddingBlock},autoResize:{resize:"none"},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}`}},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"},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}}});const resizeStyles=StyleSheet.create({both:{resize:"both"},none:{resize:"none"},horizontal:{resize:"horizontal"},vertical:{resize:"vertical"}});
+const StyledTextarea=addStyle("textarea");function getHeightForNumberOfRows(rows){return `calc((${rows} * ${font.body.lineHeight.medium}) + (2 * ${theme.field.layout.paddingBlock}) + (2 * ${border.width.thin}))`}function getTextAreaHeight(textArea){const originalStyleHeightValue=textArea.style.getPropertyValue("height");const originalStyleHeightPriority=textArea.style.getPropertyPriority("height");const originalStyleOverflowValue=textArea.style.getPropertyValue("overflow");const originalStyleOverflowPriority=textArea.style.getPropertyPriority("overflow");textArea.style.setProperty("height","0px","important");textArea.style.setProperty("overflow","hidden","important");const computedStyle=getComputedStyle(textArea);const borderTop=computedStyle.borderTopWidth;const borderBottom=computedStyle.borderBottomWidth;const newHeight=`calc(${textArea.scrollHeight}px + ${borderTop} + ${borderBottom})`;if(originalStyleHeightValue){textArea.style.setProperty("height",originalStyleHeightValue,originalStyleHeightPriority);}else {textArea.style.removeProperty("height");}if(originalStyleOverflowValue){textArea.style.setProperty("overflow",originalStyleOverflowValue,originalStyleOverflowPriority);}else {textArea.style.removeProperty("overflow");}return newHeight}const TextArea=React.forwardRef(function TextArea(props,ref){const{onChange,value,placeholder,disabled,id,testId,style,readOnly,autoComplete,name,className,autoFocus,rows=2,spellCheck,wrap,minLength,maxLength,onClick,onKeyDown,onKeyUp,onFocus,onBlur,onPaste,validate,onValidate,required,resizeType,rootStyle,error,autoResize=false,maxRows=6,instantValidation=true,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,disabled,validate,onValidate,required,instantValidation});const textAreaContainerRef=React.useRef(null);const[height,setHeight]=React.useState("0px");const hasError=error||!!errorMessage;const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);if(autoResize){setHeight(getTextAreaHeight(event.target));}};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};useOnMountEffect(()=>{if(!autoResize){return}const ref=textAreaContainerRef.current?.children[0];if(ref&&window?.ResizeObserver){const observer=new window.ResizeObserver(([entry])=>{if(entry){setHeight(getTextAreaHeight(entry.target));}});observer.observe(ref);return ()=>{observer.disconnect();}}});const autoResizeStyles=[styles.autoResize,{height,maxHeight:getHeightForNumberOfRows(Math.max(maxRows,rows))}];React.useEffect(()=>{if(autoResize){setHeight(getTextAreaHeight(textAreaContainerRef.current?.children[0]));}},[autoResize,ref]);return jsx(View,{style:[{width:"100%"},rootStyle],ref:textAreaContainerRef,children:jsx(StyledTextarea,{id:uniqueId,"data-testid":testId,ref:ref,className:className,style:[styles.textarea,styles$7.BodyTextMediumMediumWeight,resizeType&&resizeStyles[resizeType],styles.default,disabled&&styles.disabled,hasError&&styles.error,readOnly&&styles.readOnly,rows&&{minBlockSize:getHeightForNumberOfRows(rows)},autoResize&&autoResizeStyles,style],value:value,onChange:handleChange,placeholder:placeholder,"aria-disabled":disabled,readOnly:readOnly||disabled,autoComplete:autoComplete,name:name,autoFocus:autoFocus,spellCheck:spellCheck,wrap:wrap,minLength:minLength,maxLength:maxLength,"aria-required":!!required,onClick:disabled?undefined:onClick,onKeyDown:disabled?undefined:onKeyDown,onKeyUp:disabled?undefined:onKeyUp,onFocus:onFocus,onBlur:handleBlur,onPaste:disabled?undefined:onPaste,required:!!required,...otherProps,"aria-invalid":hasError})})});const styles=StyleSheet.create({textarea:{borderRadius:theme.field.border.radius,boxSizing:"border-box",paddingInline:theme.field.layout.paddingInline,paddingBlock:theme.field.layout.paddingBlock},autoResize:{resize:"none"},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}`}},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"},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}}});const resizeStyles=StyleSheet.create({both:{resize:"both"},none:{resize:"none"},horizontal:{resize:"horizontal"},vertical:{resize:"vertical"}});
 
 export { Checkbox, CheckboxGroup, Choice, labeledTextField as LabeledTextField, RadioGroup, TextArea, TextField$1 as TextField };

package/dist/index.js

@@ -43,9 +43,9 @@ var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-form-");
 
 const baseStyles={choice:{sizing:{size:wonderBlocksTokens.sizing.size_160},checked:{border:wonderBlocksTokens.semanticColor.input.checked.border},disabled:{border:wonderBlocksTokens.semanticColor.input.disabled.border,background:wonderBlocksTokens.semanticColor.input.disabled.background},error:{border:wonderBlocksTokens.semanticColor.input.error.border,background:wonderBlocksTokens.semanticColor.input.error.background},unchecked:{rest:{border:wonderBlocksTokens.semanticColor.input.default.border,background:wonderBlocksTokens.semanticColor.input.default.background},hover:{border:wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.border,background:wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.background},press:{border:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.border,background:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.background}}},radio:{border:{radius:{default:wonderBlocksTokens.border.radius.radius_full},width:{default:wonderBlocksTokens.border.width.thin}}},checkbox:{border:{radius:{default:wonderBlocksTokens.border.radius.radius_040},width:{default:wonderBlocksTokens.border.width.thin}},sizing:{checkSize:wonderBlocksTokens.sizing.size_120},disabledChecked:{border:wonderBlocksTokens.semanticColor.core.transparent,background:wonderBlocksTokens.semanticColor.core.background.disabled.strong}},icon:{default:{foreground:wonderBlocksTokens.semanticColor.core.foreground.knockout.default},disabled:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.subtle}}};const colorStates={checkbox:{unchecked:{default:baseStyles.choice.unchecked,disabled:{rest:baseStyles.choice.disabled,hover:baseStyles.choice.disabled,press:baseStyles.choice.disabled},error:{rest:baseStyles.choice.error,hover:baseStyles.choice.error,press:{...baseStyles.choice.error,border:wonderBlocksTokens.semanticColor.core.border.critical.strong}}},checked:{default:{rest:{border:wonderBlocksTokens.semanticColor.core.transparent,background:wonderBlocksTokens.semanticColor.input.checked.background},hover:{border:wonderBlocksTokens.semanticColor.core.border.instructive.default},press:{border:wonderBlocksTokens.semanticColor.input.checked.border,background:wonderBlocksTokens.semanticColor.core.background.instructive.strong}},disabled:{rest:baseStyles.checkbox.disabledChecked,hover:baseStyles.checkbox.disabledChecked,press:baseStyles.checkbox.disabledChecked},error:{rest:{background:wonderBlocksTokens.semanticColor.core.border.critical.default,border:wonderBlocksTokens.semanticColor.core.border.critical.default},hover:{background:wonderBlocksTokens.semanticColor.core.background.critical.default,border:wonderBlocksTokens.semanticColor.core.border.critical.default},press:{background:wonderBlocksTokens.semanticColor.core.background.critical.strong,border:wonderBlocksTokens.semanticColor.core.border.critical.strong}}}},radio:{unchecked:{default:baseStyles.choice.unchecked,disabled:{rest:baseStyles.choice.disabled,hover:baseStyles.choice.disabled,press:baseStyles.choice.disabled},error:{rest:baseStyles.choice.error,hover:baseStyles.choice.error,press:{...baseStyles.choice.error,border:wonderBlocksTokens.semanticColor.core.border.critical.strong}}},checked:{default:{rest:{border:wonderBlocksTokens.semanticColor.input.checked.background,background:wonderBlocksTokens.semanticColor.core.background.base.default},hover:baseStyles.choice.checked,press:{border:wonderBlocksTokens.semanticColor.core.background.instructive.strong,background:wonderBlocksTokens.semanticColor.core.background.instructive.strong}},error:{rest:baseStyles.choice.error,hover:baseStyles.choice.error,press:{...baseStyles.choice.error,background:wonderBlocksTokens.semanticColor.core.background.critical.strong,border:wonderBlocksTokens.semanticColor.core.border.critical.strong}},disabled:{rest:{border:wonderBlocksTokens.semanticColor.core.border.disabled.default,background:wonderBlocksTokens.semanticColor.core.background.base.default},hover:{border:wonderBlocksTokens.semanticColor.core.border.disabled.strong,background:wonderBlocksTokens.semanticColor.core.background.base.default},press:{border:wonderBlocksTokens.semanticColor.core.border.disabled.strong,background:wonderBlocksTokens.semanticColor.core.background.base.default}}}}};
 
-function mapCheckedToAriaChecked(value){switch(value){case true:return "true";case false:return "false";default:return "mixed"}}const StyledInput$2=wonderBlocksCore.addStyle("input");const CheckboxCore=React__namespace.forwardRef(function CheckboxCore(props,ref){const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const innerRef=React__namespace.useRef(null);React__namespace.useEffect(()=>{if(innerRef.current!=null){innerRef.current.indeterminate=checked==null;}},[checked,innerRef]);const handleChange=()=>{return};const stateStyles=_generateStyles$1(checked,error,disabled);const defaultStyle=[sharedStyles$1.inputReset,sharedStyles$1.default,stateStyles.default];const wrapperStyle=[sharedStyles$1.inputWrapper,stateStyles.inputWrapper];const checkboxIcon=jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{color:disabled?baseStyles.icon.disabled.foreground:baseStyles.icon.default.foreground,icon:checked?checkIcon__default["default"]:minusIcon__default["default"],size:"small",style:[sharedStyles$1.checkboxIcon,{width:baseStyles.checkbox.sizing.checkSize,height:baseStyles.checkbox.sizing.checkSize}]});const ariaChecked=mapCheckedToAriaChecked(checked);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,testId:"wb-checkbox-wrapper",children:[jsxRuntime.jsx(StyledInput$2,{...sharedProps,ref:node=>{innerRef.current=node;if(typeof ref==="function"){ref(node);}else if(ref!=null){ref.current=node;}},type:"checkbox","aria-checked":ariaChecked,"aria-invalid":error,checked:checked??undefined,disabled:disabled,id:id,name:groupName,onChange:handleChange,style:defaultStyle,"data-testid":testId}),checked||checked==null?checkboxIcon:jsxRuntime.jsx(jsxRuntime.Fragment,{})]})})});const sharedStyles$1=aphrodite.StyleSheet.create({inputWrapper:{margin:theme.choice.inputWrapper.layout.margin,padding:theme.choice.inputWrapper.layout.padding,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.checkbox.border.width.default,borderRadius:baseStyles.checkbox.border.radius.default},checkboxIcon:{position:"absolute",pointerEvents:"none",margin:`calc((${baseStyles.choice.sizing.size} - ${baseStyles.checkbox.sizing.checkSize}) / 2)`}});const styles$6={};const _generateStyles$1=(checked,error,disabled)=>{const styleKey=`${String(checked)}-${String(error)}-${String(disabled)}`;if(styles$6[styleKey]){return styles$6[styleKey]}const isCheckedOrIndeterminate=checked||checked==null;let stateStyles={};const currentState=error?"error":disabled?"disabled":"default";if(isCheckedOrIndeterminate){const checkedStyles=colorStates.checkbox.checked[currentState];stateStyles={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,":focus-visible:not([disabled])":wonderBlocksStyles.focusStyles.focus[":focus-visible"],":active:not([disabled])":{outline:`${wonderBlocksTokens.border.width.medium} solid ${checkedStyles.press.border}`,outlineOffset:1,background:checkedStyles.press.background,borderColor:checkedStyles.press.background}}};}else {const uncheckedStyles=colorStates.checkbox.unchecked[currentState];stateStyles={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},":active:not([disabled])":{backgroundColor:uncheckedStyles.press.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${uncheckedStyles.press.border}`,outlineOffset:-1}}};}styles$6[styleKey]=aphrodite.StyleSheet.create(stateStyles);return styles$6[styleKey]};
+function mapCheckedToAriaChecked(value){switch(value){case true:return "true";case false:return "false";default:return "mixed"}}const StyledInput$2=wonderBlocksCore.addStyle("input");const CheckboxCore=React__namespace.forwardRef(function CheckboxCore(props,ref){const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const innerRef=React__namespace.useRef(null);React__namespace.useEffect(()=>{if(innerRef.current!=null){innerRef.current.indeterminate=checked==null;}},[checked,innerRef]);const handleChange=()=>{return};const stateStyles=_generateStyles$1(checked,error,disabled);const defaultStyle=[sharedStyles$1.inputReset,sharedStyles$1.default,stateStyles.default];const wrapperStyle=[sharedStyles$1.inputWrapper,stateStyles.inputWrapper];const checkboxIcon=jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{color:disabled?baseStyles.icon.disabled.foreground:baseStyles.icon.default.foreground,icon:checked?checkIcon__default["default"]:minusIcon__default["default"],size:"small",style:[sharedStyles$1.checkboxIcon,{width:baseStyles.checkbox.sizing.checkSize,height:baseStyles.checkbox.sizing.checkSize}]});const ariaChecked=mapCheckedToAriaChecked(checked);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,testId:"wb-checkbox-wrapper",children:[jsxRuntime.jsx(StyledInput$2,{...sharedProps,ref:node=>{innerRef.current=node;if(typeof ref==="function"){ref(node);}else if(ref!=null){ref.current=node;}},type:"checkbox","aria-checked":ariaChecked,"aria-invalid":error,checked:checked??undefined,disabled:disabled,id:id,name:groupName,onChange:handleChange,style:defaultStyle,"data-testid":testId}),checked||checked==null?checkboxIcon:jsxRuntime.jsx(jsxRuntime.Fragment,{})]})})});const sharedStyles$1=aphrodite.StyleSheet.create({inputWrapper:{margin:theme.choice.inputWrapper.layout.margin,padding:theme.choice.inputWrapper.layout.padding,position:"relative"},inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:baseStyles.choice.sizing.size,width:baseStyles.choice.sizing.size,minBlockSize:baseStyles.choice.sizing.size,minInlineSize:baseStyles.choice.sizing.size,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:baseStyles.checkbox.border.width.default,borderRadius:baseStyles.checkbox.border.radius.default},checkboxIcon:{position:"absolute",pointerEvents:"none",margin:`calc((${baseStyles.choice.sizing.size} - ${baseStyles.checkbox.sizing.checkSize}) / 2)`}});const styles$6={};const _generateStyles$1=(checked,error,disabled)=>{const styleKey=`${String(checked)}-${String(error)}-${String(disabled)}`;if(styles$6[styleKey]){return styles$6[styleKey]}const isCheckedOrIndeterminate=checked||checked==null;let stateStyles={};const currentState=error?"error":disabled?"disabled":"default";if(isCheckedOrIndeterminate){const checkedStyles=colorStates.checkbox.checked[currentState];stateStyles={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,":focus-visible:not([disabled])":wonderBlocksStyles.focusStyles.focus[":focus-visible"],":active:not([disabled])":{outline:`${wonderBlocksTokens.border.width.medium} solid ${checkedStyles.press.border}`,outlineOffset:1,background:checkedStyles.press.background,borderColor:checkedStyles.press.background}}};}else {const uncheckedStyles=colorStates.checkbox.unchecked[currentState];stateStyles={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},":active:not([disabled])":{backgroundColor:uncheckedStyles.press.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${uncheckedStyles.press.border}`,outlineOffset:-1}}};}styles$6[styleKey]=aphrodite.StyleSheet.create(stateStyles);return styles$6[styleKey]};
 
-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 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,minBlockSize:baseStyles.choice.sizing.size,minInlineSize: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.sizing.size_080,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:{marginInlineStart:`calc(${wonderBlocksTokens.sizing.size_160} + ${wonderBlocksTokens.sizing.size_080})`,marginBlockStart:wonderBlocksTokens.sizing.size_040,color:theme.description.color.foreground}});
 
@@ -69,7 +69,7 @@ const StyledSpan=wonderBlocksCore.addStyle("span");class FieldHeading extends Re
 
 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}));
 
-const StyledTextarea=wonderBlocksCore.addStyle("textarea");function getHeightForNumberOfRows(rows){return `calc((${rows} * ${wonderBlocksTokens.font.body.lineHeight.medium}) + (2 * ${theme.field.layout.paddingBlock}) + (2 * ${wonderBlocksTokens.border.width.thin}))`}function getTextAreaHeight(textArea){const originalStyleHeightValue=textArea.style.getPropertyValue("height");const originalStyleHeightPriority=textArea.style.getPropertyPriority("height");const originalStyleOverflowValue=textArea.style.getPropertyValue("overflow");const originalStyleOverflowPriority=textArea.style.getPropertyPriority("overflow");textArea.style.setProperty("height","0px","important");textArea.style.setProperty("overflow","hidden","important");const computedStyle=getComputedStyle(textArea);const borderTop=computedStyle.borderTopWidth;const borderBottom=computedStyle.borderBottomWidth;const newHeight=`calc(${textArea.scrollHeight}px + ${borderTop} + ${borderBottom})`;if(originalStyleHeightValue){textArea.style.setProperty("height",originalStyleHeightValue,originalStyleHeightPriority);}else {textArea.style.removeProperty("height");}if(originalStyleOverflowValue){textArea.style.setProperty("overflow",originalStyleOverflowValue,originalStyleOverflowPriority);}else {textArea.style.removeProperty("overflow");}return newHeight}const TextArea=React__namespace.forwardRef(function TextArea(props,ref){const{onChange,value,placeholder,disabled,id,testId,style,readOnly,autoComplete,name,className,autoFocus,rows=2,spellCheck,wrap,minLength,maxLength,onClick,onKeyDown,onKeyUp,onFocus,onBlur,onPaste,validate,onValidate,required,resizeType,rootStyle,error,autoResize=false,maxRows=6,instantValidation=true,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,disabled,validate,onValidate,required,instantValidation});const textAreaContainerRef=React__namespace.useRef(null);const[height,setHeight]=React__namespace.useState("0px");const hasError=error||!!errorMessage;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);if(autoResize){setHeight(getTextAreaHeight(event.target));}};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};wonderBlocksCore.useOnMountEffect(()=>{if(!autoResize){return}const ref=textAreaContainerRef.current?.children[0];if(ref&&window?.ResizeObserver){const observer=new window.ResizeObserver(([entry])=>{if(entry){setHeight(getTextAreaHeight(entry.target));}});observer.observe(ref);return ()=>{observer.disconnect();}}});const autoResizeStyles=[styles.autoResize,{height,maxHeight:getHeightForNumberOfRows(Math.max(maxRows,rows))}];React__namespace.useEffect(()=>{if(autoResize){setHeight(getTextAreaHeight(textAreaContainerRef.current?.children[0]));}},[autoResize,ref]);return jsxRuntime.jsx(wonderBlocksCore.View,{style:[{width:"100%"},rootStyle],ref:textAreaContainerRef,children:jsxRuntime.jsx(StyledTextarea,{id:uniqueId,"data-testid":testId,ref:ref,className:className,style:[styles.textarea,wonderBlocksTypography.styles.BodyTextMediumMediumWeight,resizeType&&resizeStyles[resizeType],styles.default,disabled&&styles.disabled,hasError&&styles.error,readOnly&&styles.readOnly,rows&&{minHeight:getHeightForNumberOfRows(rows)},autoResize&&autoResizeStyles,style],value:value,onChange:handleChange,placeholder:placeholder,"aria-disabled":disabled,readOnly:readOnly||disabled,autoComplete:autoComplete,name:name,autoFocus:autoFocus,spellCheck:spellCheck,wrap:wrap,minLength:minLength,maxLength:maxLength,"aria-required":!!required,onClick:disabled?undefined:onClick,onKeyDown:disabled?undefined:onKeyDown,onKeyUp:disabled?undefined:onKeyUp,onFocus:onFocus,onBlur:handleBlur,onPaste:disabled?undefined:onPaste,required:!!required,...otherProps,"aria-invalid":hasError})})});const styles=aphrodite.StyleSheet.create({textarea:{borderRadius:theme.field.border.radius,boxSizing:"border-box",paddingInline:theme.field.layout.paddingInline,paddingBlock:theme.field.layout.paddingBlock},autoResize:{resize:"none"},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}`}},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"},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}}});const resizeStyles=aphrodite.StyleSheet.create({both:{resize:"both"},none:{resize:"none"},horizontal:{resize:"horizontal"},vertical:{resize:"vertical"}});
+const StyledTextarea=wonderBlocksCore.addStyle("textarea");function getHeightForNumberOfRows(rows){return `calc((${rows} * ${wonderBlocksTokens.font.body.lineHeight.medium}) + (2 * ${theme.field.layout.paddingBlock}) + (2 * ${wonderBlocksTokens.border.width.thin}))`}function getTextAreaHeight(textArea){const originalStyleHeightValue=textArea.style.getPropertyValue("height");const originalStyleHeightPriority=textArea.style.getPropertyPriority("height");const originalStyleOverflowValue=textArea.style.getPropertyValue("overflow");const originalStyleOverflowPriority=textArea.style.getPropertyPriority("overflow");textArea.style.setProperty("height","0px","important");textArea.style.setProperty("overflow","hidden","important");const computedStyle=getComputedStyle(textArea);const borderTop=computedStyle.borderTopWidth;const borderBottom=computedStyle.borderBottomWidth;const newHeight=`calc(${textArea.scrollHeight}px + ${borderTop} + ${borderBottom})`;if(originalStyleHeightValue){textArea.style.setProperty("height",originalStyleHeightValue,originalStyleHeightPriority);}else {textArea.style.removeProperty("height");}if(originalStyleOverflowValue){textArea.style.setProperty("overflow",originalStyleOverflowValue,originalStyleOverflowPriority);}else {textArea.style.removeProperty("overflow");}return newHeight}const TextArea=React__namespace.forwardRef(function TextArea(props,ref){const{onChange,value,placeholder,disabled,id,testId,style,readOnly,autoComplete,name,className,autoFocus,rows=2,spellCheck,wrap,minLength,maxLength,onClick,onKeyDown,onKeyUp,onFocus,onBlur,onPaste,validate,onValidate,required,resizeType,rootStyle,error,autoResize=false,maxRows=6,instantValidation=true,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,disabled,validate,onValidate,required,instantValidation});const textAreaContainerRef=React__namespace.useRef(null);const[height,setHeight]=React__namespace.useState("0px");const hasError=error||!!errorMessage;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);if(autoResize){setHeight(getTextAreaHeight(event.target));}};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};wonderBlocksCore.useOnMountEffect(()=>{if(!autoResize){return}const ref=textAreaContainerRef.current?.children[0];if(ref&&window?.ResizeObserver){const observer=new window.ResizeObserver(([entry])=>{if(entry){setHeight(getTextAreaHeight(entry.target));}});observer.observe(ref);return ()=>{observer.disconnect();}}});const autoResizeStyles=[styles.autoResize,{height,maxHeight:getHeightForNumberOfRows(Math.max(maxRows,rows))}];React__namespace.useEffect(()=>{if(autoResize){setHeight(getTextAreaHeight(textAreaContainerRef.current?.children[0]));}},[autoResize,ref]);return jsxRuntime.jsx(wonderBlocksCore.View,{style:[{width:"100%"},rootStyle],ref:textAreaContainerRef,children:jsxRuntime.jsx(StyledTextarea,{id:uniqueId,"data-testid":testId,ref:ref,className:className,style:[styles.textarea,wonderBlocksTypography.styles.BodyTextMediumMediumWeight,resizeType&&resizeStyles[resizeType],styles.default,disabled&&styles.disabled,hasError&&styles.error,readOnly&&styles.readOnly,rows&&{minBlockSize:getHeightForNumberOfRows(rows)},autoResize&&autoResizeStyles,style],value:value,onChange:handleChange,placeholder:placeholder,"aria-disabled":disabled,readOnly:readOnly||disabled,autoComplete:autoComplete,name:name,autoFocus:autoFocus,spellCheck:spellCheck,wrap:wrap,minLength:minLength,maxLength:maxLength,"aria-required":!!required,onClick:disabled?undefined:onClick,onKeyDown:disabled?undefined:onKeyDown,onKeyUp:disabled?undefined:onKeyUp,onFocus:onFocus,onBlur:handleBlur,onPaste:disabled?undefined:onPaste,required:!!required,...otherProps,"aria-invalid":hasError})})});const styles=aphrodite.StyleSheet.create({textarea:{borderRadius:theme.field.border.radius,boxSizing:"border-box",paddingInline:theme.field.layout.paddingInline,paddingBlock:theme.field.layout.paddingBlock},autoResize:{resize:"none"},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}`}},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"},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}}});const resizeStyles=aphrodite.StyleSheet.create({both:{resize:"both"},none:{resize:"none"},horizontal:{resize:"horizontal"},vertical:{resize:"vertical"}});
 
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;

package/dist/theme/syl-dark.d.ts

@@ -0,0 +1,32 @@
+declare const _default: {
+    choice: {
+        inputWrapper: {
+            layout: {
+                padding: string;
+                margin: string;
+            };
+        };
+    };
+    description: {
+        color: {
+            foreground: string;
+        };
+    };
+    field: {
+        border: {
+            radius: string;
+            width: {
+                error: string;
+                press: string;
+            };
+        };
+        sizing: {
+            height: string;
+        };
+        layout: {
+            paddingBlock: string;
+            paddingInline: string;
+        };
+    };
+};
+export default _default;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Form components for Wonder Blocks.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "7.5.10",
+  "version": "7.6.1",
   "publishConfig": {
     "access": "public"
   },
@@ -28,12 +28,12 @@
     "./styles.css": "./dist/css/vars.css"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "8.1.9",
-    "@khanacademy/wonder-blocks-core": "12.4.3",
-    "@khanacademy/wonder-blocks-icon": "5.3.13",
-    "@khanacademy/wonder-blocks-layout": "3.1.50",
-    "@khanacademy/wonder-blocks-tokens": "16.4.1",
-    "@khanacademy/wonder-blocks-typography": "4.3.3"
+    "@khanacademy/wonder-blocks-clickable": "8.2.0",
+    "@khanacademy/wonder-blocks-core": "12.4.4",
+    "@khanacademy/wonder-blocks-icon": "5.3.15",
+    "@khanacademy/wonder-blocks-layout": "3.1.52",
+    "@khanacademy/wonder-blocks-tokens": "16.5.0",
+    "@khanacademy/wonder-blocks-typography": "4.3.5"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",