@khanacademy/wonder-blocks-form 7.3.9 → 7.4.1

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

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-form@7.3.9 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-form
+> @khanacademy/wonder-blocks-form@7.4.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,18 @@
 # @khanacademy/wonder-blocks-form
 
+## 7.4.1
+
+### Patch Changes
+
+- Updated dependencies [44f77b7]
+    - @khanacademy/wonder-blocks-icon@5.3.0
+
+## 7.4.0
+
+### Minor Changes
+
+- e095f19: TextArea: Add `autoResize` and `maxRows` props. The `resizeType` prop is deprecated in favour of these new props.
+
 ## 7.3.9
 
 ### Patch Changes

package/dist/components/text-area.d.ts

@@ -71,10 +71,12 @@ declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("@khanac
      */
     autoFocus?: boolean;
     /**
-     * The number of visible lines of text for the textarea.
-     * By default, 2 rows are shown.
-     * `rows` is ignored if a height is applied to the textarea using CSS.
-     * The number of rows can change if the resize control is used by the user.
+     * The number of visible lines of text for the textarea. Defaults to 2.
+     *
+     * If `autoResize` is `true`, `rows` is the starting number of rows and more
+     * content increases the number of rows, up until the `maxRows` prop value
+     * is reached. If `autoResize` is `false`, the textarea will be scrollable
+     * with the number of rows set by the `rows` prop.
      */
     rows?: number;
     /**
@@ -180,9 +182,29 @@ declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("@khanac
      */
     required?: boolean | string;
     /**
+     * @deprecated This prop is deprecated in favour of the `autoResize` prop.
      * Specifies the resizing behaviour for the textarea. Defaults to both
      * behaviour. For more details, see the [CSS resize property values MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/resize#values)
      */
     resizeType?: "horizontal" | "vertical" | "both" | "none";
+    /**
+     * Whether the textarea should automatically resize to fit the content.
+     * If `true`, the textarea will resize to fit the content. If `false`,
+     * the textarea will not change in size and the textarea will be scrollable if
+     * content exceeds the height of the textarea.
+     *
+     * Defaults to `false`.
+     *
+     * See related `maxRows` prop for setting the max height for the textarea.
+     */
+    autoResize?: boolean;
+    /**
+     * The maximum number of rows to show when `autoResize` is `true` to prevent
+     * the textarea from becoming too tall. The textarea will become scrollable
+     * if content exceeds the max number of rows.
+     *
+     * Defaults to 6. If `rows` > `maxRows`, `rows` will be used for `maxRows`.
+     */
+    maxRows?: number;
 } & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;

package/dist/es/index.js

@@ -43,6 +43,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");const TextArea=React.forwardRef(function TextArea(props,ref){const{onChange,value,placeholder,disabled,id,testId,style,readOnly,autoComplete,name,className,autoFocus,rows,spellCheck,wrap,minLength,maxLength,onClick,onKeyDown,onKeyUp,onFocus,onBlur,onPaste,validate,onValidate,required,resizeType,rootStyle,error,instantValidation=true,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,disabled,validate,onValidate,required,instantValidation});const hasError=error||!!errorMessage;const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};return jsx(View,{style:[{width:"100%"},rootStyle],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,style],value:value,onChange:handleChange,placeholder:placeholder,"aria-disabled":disabled,readOnly:readOnly||disabled,autoComplete:autoComplete,name:name,autoFocus:autoFocus,rows:rows,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,minHeight:theme.field.sizing.height},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&&{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"}});
 
 export { Checkbox, CheckboxGroup, Choice, labeledTextField as LabeledTextField, RadioGroup, TextArea, TextField$1 as TextField };

package/dist/index.js

@@ -70,7 +70,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");const TextArea=React__namespace.forwardRef(function TextArea(props,ref){const{onChange,value,placeholder,disabled,id,testId,style,readOnly,autoComplete,name,className,autoFocus,rows,spellCheck,wrap,minLength,maxLength,onClick,onKeyDown,onKeyUp,onFocus,onBlur,onPaste,validate,onValidate,required,resizeType,rootStyle,error,instantValidation=true,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,disabled,validate,onValidate,required,instantValidation});const hasError=error||!!errorMessage;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};return jsxRuntime.jsx(wonderBlocksCore.View,{style:[{width:"100%"},rootStyle],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,style],value:value,onChange:handleChange,placeholder:placeholder,"aria-disabled":disabled,readOnly:readOnly||disabled,autoComplete:autoComplete,name:name,autoFocus:autoFocus,rows:rows,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,minHeight:theme.field.sizing.height},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&&{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"}});
 
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "7.3.9",
+  "version": "7.4.1",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "exports": {
@@ -22,7 +22,7 @@
   "dependencies": {
     "@khanacademy/wonder-blocks-clickable": "8.0.0",
     "@khanacademy/wonder-blocks-core": "12.4.0",
-    "@khanacademy/wonder-blocks-icon": "5.2.20",
+    "@khanacademy/wonder-blocks-icon": "5.3.0",
     "@khanacademy/wonder-blocks-layout": "3.1.37",
     "@khanacademy/wonder-blocks-tokens": "14.0.0",
     "@khanacademy/wonder-blocks-typography": "4.2.22"