@khanacademy/wonder-blocks-labeled-field 4.1.10 → 4.2.0

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

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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/wonder-blocks-labeled-field
 
+## 4.2.0
+
+### Minor Changes
+
+- bd6275f: LabeledField: use id and testId on the root element of the component
+
+## 4.1.11
+
+### Patch Changes
+
+- Updated dependencies [04522d4]
+- Updated dependencies [5b4fed3]
+    - @khanacademy/wonder-blocks-tokens@18.0.0
+    - @khanacademy/wonder-blocks-layout@3.1.62
+    - @khanacademy/wonder-blocks-typography@5.0.5
+    - @khanacademy/wonder-blocks-core@12.5.0
+
 ## 4.1.10
 
 ### Patch Changes

package/dist/components/labeled-field.d.ts

@@ -60,6 +60,7 @@ type Props = {
     /**
      * A unique id to use as the base of the ids for the elements within the component.
      * Here is how the id is used for the different elements in the component:
+     * - The root element will have an id formatted as `${id}`
      * - The label will have an id formatted as `${id}-label`
      * - The context label will have an id formatted as `${id}-context-label`
      * - The description will have an id formatted as `${id}-description`
@@ -79,6 +80,7 @@ type Props = {
     /**
      * Optional test id for e2e testing. Here is how the test id is used for the
      * different elements in the component:
+     * - The root element will have a testId formatted as `${testId}`
      * - The label will have a testId formatted as `${testId}-label`
      * - The context label will have a testId formatted as `${testId}-context-label`
      * - The description will have a testId formatted as `${testId}-description`

package/dist/es/index.js

@@ -13,6 +13,6 @@ const theme$1={root:{layout:{paddingBlockEnd:{labelWithDescription:sizing.size_0
 
 var theme = mapValuesToCssVars(theme$1,"--wb-c-labeled-field-");
 
-const defaultLabeledFieldLabels={errorIconAriaLabel:"Error:"};function LabeledField(props){const{field,styles:stylesProp,label,id,testId,contextLabel,description,errorMessage,readOnlyMessage,additionalHelperMessage,labels=defaultLabeledFieldLabels}=props;const generatedUniqueId=React.useId();const uniqueId=id??`${generatedUniqueId}-labeled-field`;const labelId=`${uniqueId}-label`;const descriptionId=`${uniqueId}-description`;const fieldId=`${uniqueId}-field`;const errorId=`${uniqueId}-error`;const readOnlyMessageId=`${uniqueId}-read-only-message`;const additionalHelperMessageId=`${uniqueId}-additional-helper-message`;const contextLabelId=`${uniqueId}-context-label`;const hasError=!!errorMessage||!!field.props.error;const isDisabled=!!field.props.disabled;function renderLabelAndContextLabel(){return jsxs(View,{style:styles.labelContainer,children:[jsx(BodyText,{style:[styles.label,hasError?styles.labelWithError:undefined,description?styles.labelWithDescription:styles.labelWithNoDescription,isDisabled&&styles.disabledLabel,stylesProp?.label],tag:"label",htmlFor:fieldId,testId:testId&&`${testId}-label`,id:labelId,weight:"semi",children:label}),contextLabel&&jsx(BodyText,{tag:"div",id:contextLabelId,testId:testId&&`${testId}-context-label`,style:[styles.helperText,styles.contextLabel,isDisabled&&styles.disabledHelperText,hasError?styles.contextLabelWithError:undefined,stylesProp?.contextLabel],children:contextLabel})]})}function maybeRenderDescription(){if(!description){return null}return jsx(BodyText,{style:[styles.helperText,styles.spacingBelowHelperText,isDisabled&&styles.disabledHelperText,stylesProp?.description],testId:testId&&`${testId}-description`,id:descriptionId,children:description})}function maybeRenderError(){return jsx(View,{style:[styles.helperTextWithIcon,errorMessage?styles.spacingAboveHelperText:undefined,stylesProp?.error],id:errorId,testId:testId&&`${testId}-error`,"aria-live":"assertive","aria-atomic":"true",children:errorMessage&&jsxs(Fragment,{children:[jsx(PhosphorIcon,{icon:WarningCircle,style:[styles.errorIcon,styles.error],role:"img","aria-label":labels.errorIconAriaLabel}),jsx(BodyText,{style:[styles.helperText,styles.errorMessage,styles.error],children:errorMessage})]})})}function renderField(){return React.cloneElement(field,{id:fieldId,"aria-describedby":[contextLabel&&contextLabelId,description&&descriptionId,additionalHelperMessage&&additionalHelperMessageId,readOnlyMessage&&readOnlyMessageId,errorMessage&&errorId].filter(Boolean).join(" "),error:hasError,testId:testId?`${testId}-field`:undefined,readOnly:!!readOnlyMessage||field.props.readOnly})}function maybeRenderReadOnlyMessage(){if(!readOnlyMessage){return null}return jsxs(View,{style:[styles.helperTextWithIcon,styles.spacingAboveHelperText,stylesProp?.readOnlyMessage],id:readOnlyMessageId,testId:testId&&`${testId}-read-only-message`,children:[jsx(PhosphorIcon,{icon:LockIcon,"aria-label":labels.readOnlyIconAriaLabel,color:semanticColor.core.foreground.neutral.subtle}),jsx(BodyText,{style:styles.helperText,children:readOnlyMessage})]})}function maybeRenderAdditionalHelperMessage(){if(!additionalHelperMessage){return null}return jsx(BodyText,{id:additionalHelperMessageId,testId:testId&&`${testId}-additional-helper-message`,style:[styles.helperText,styles.spacingAboveHelperText,isDisabled&&styles.disabledHelperText,stylesProp?.additionalHelperMessage],tag:"div",children:additionalHelperMessage})}return jsxs(View,{style:stylesProp?.root,children:[renderLabelAndContextLabel(),maybeRenderDescription(),renderField(),maybeRenderAdditionalHelperMessage(),maybeRenderReadOnlyMessage(),maybeRenderError()]})}const styles=StyleSheet.create({labelContainer:{display:"flex",flexDirection:"row",justifyContent:"space-between",gap:theme.root.layout.spacingBetweenHelperText},label:{color:semanticColor.core.foreground.neutral.strong,overflowWrap:"break-word",minInlineSize:sizing.size_0},contextLabel:{lineHeight:font.body.lineHeight.medium,maxInlineSize:"30%",flexShrink:0},labelWithError:{color:theme.label.color.error.foreground,fontWeight:theme.error.font.weight},contextLabelWithError:{color:theme.contextLabel.color.error.foreground,fontWeight:theme.error.font.weight},disabledLabel:{color:theme.label.color.disabled.foreground},labelWithDescription:{paddingBlockEnd:theme.root.layout.paddingBlockEnd.labelWithDescription},labelWithNoDescription:{paddingBlockEnd:theme.root.layout.paddingBlockEnd.labelWithNoDescription},helperTextWithIcon:{flexDirection:"row",gap:theme.helperText.layout.gap},spacingAboveHelperText:{paddingBlockStart:theme.root.layout.spacingBetweenHelperText},spacingBelowHelperText:{paddingBlockEnd:theme.root.layout.spacingBetweenHelperText},helperText:{color:theme.helperText.color.default.foreground,fontSize:theme.helperText.font.size,lineHeight:theme.helperText.font.lineHeight,minInlineSize:sizing.size_0,overflowWrap:"break-word"},disabledHelperText:{color:theme.helperText.color.disabled.foreground},error:{color:semanticColor.core.foreground.critical.default},errorIcon:{marginBlockStart:sizing.size_010},errorMessage:{fontWeight:theme.error.font.weight,marginBlockStart:theme.error.layout.marginBlockStart}});
+const defaultLabeledFieldLabels={errorIconAriaLabel:"Error:"};function LabeledField(props){const{field,styles:stylesProp,label,id,testId,contextLabel,description,errorMessage,readOnlyMessage,additionalHelperMessage,labels=defaultLabeledFieldLabels}=props;const generatedUniqueId=React.useId();const uniqueId=id??`${generatedUniqueId}-labeled-field`;const labelId=`${uniqueId}-label`;const descriptionId=`${uniqueId}-description`;const fieldId=`${uniqueId}-field`;const errorId=`${uniqueId}-error`;const readOnlyMessageId=`${uniqueId}-read-only-message`;const additionalHelperMessageId=`${uniqueId}-additional-helper-message`;const contextLabelId=`${uniqueId}-context-label`;const hasError=!!errorMessage||!!field.props.error;const isDisabled=!!field.props.disabled;function renderLabelAndContextLabel(){return jsxs(View,{style:styles.labelContainer,children:[jsx(BodyText,{style:[styles.label,hasError?styles.labelWithError:undefined,description?styles.labelWithDescription:styles.labelWithNoDescription,isDisabled&&styles.disabledLabel,stylesProp?.label],tag:"label",htmlFor:fieldId,testId:testId&&`${testId}-label`,id:labelId,weight:"semi",children:label}),contextLabel&&jsx(BodyText,{tag:"div",id:contextLabelId,testId:testId&&`${testId}-context-label`,style:[styles.helperText,styles.contextLabel,isDisabled&&styles.disabledHelperText,hasError?styles.contextLabelWithError:undefined,stylesProp?.contextLabel],children:contextLabel})]})}function maybeRenderDescription(){if(!description){return null}return jsx(BodyText,{style:[styles.helperText,styles.spacingBelowHelperText,isDisabled&&styles.disabledHelperText,stylesProp?.description],testId:testId&&`${testId}-description`,id:descriptionId,children:description})}function maybeRenderError(){return jsx(View,{style:[styles.helperTextWithIcon,errorMessage?styles.spacingAboveHelperText:undefined,stylesProp?.error],id:errorId,testId:testId&&`${testId}-error`,"aria-live":"assertive","aria-atomic":"true",children:errorMessage&&jsxs(Fragment,{children:[jsx(PhosphorIcon,{icon:WarningCircle,style:[styles.errorIcon,styles.error],role:"img","aria-label":labels.errorIconAriaLabel}),jsx(BodyText,{style:[styles.helperText,styles.errorMessage,styles.error],children:errorMessage})]})})}function renderField(){return React.cloneElement(field,{id:fieldId,"aria-describedby":[contextLabel&&contextLabelId,description&&descriptionId,additionalHelperMessage&&additionalHelperMessageId,readOnlyMessage&&readOnlyMessageId,errorMessage&&errorId].filter(Boolean).join(" "),error:hasError,testId:testId?`${testId}-field`:undefined,readOnly:!!readOnlyMessage||field.props.readOnly})}function maybeRenderReadOnlyMessage(){if(!readOnlyMessage){return null}return jsxs(View,{style:[styles.helperTextWithIcon,styles.spacingAboveHelperText,stylesProp?.readOnlyMessage],id:readOnlyMessageId,testId:testId&&`${testId}-read-only-message`,children:[jsx(PhosphorIcon,{icon:LockIcon,"aria-label":labels.readOnlyIconAriaLabel,color:semanticColor.core.foreground.neutral.subtle}),jsx(BodyText,{style:styles.helperText,children:readOnlyMessage})]})}function maybeRenderAdditionalHelperMessage(){if(!additionalHelperMessage){return null}return jsx(BodyText,{id:additionalHelperMessageId,testId:testId&&`${testId}-additional-helper-message`,style:[styles.helperText,styles.spacingAboveHelperText,isDisabled&&styles.disabledHelperText,stylesProp?.additionalHelperMessage],tag:"div",children:additionalHelperMessage})}return jsxs(View,{style:stylesProp?.root,testId:testId,id:uniqueId,children:[renderLabelAndContextLabel(),maybeRenderDescription(),renderField(),maybeRenderAdditionalHelperMessage(),maybeRenderReadOnlyMessage(),maybeRenderError()]})}const styles=StyleSheet.create({labelContainer:{display:"flex",flexDirection:"row",justifyContent:"space-between",gap:theme.root.layout.spacingBetweenHelperText},label:{color:semanticColor.core.foreground.neutral.strong,overflowWrap:"break-word",minInlineSize:sizing.size_0},contextLabel:{lineHeight:font.body.lineHeight.medium,maxInlineSize:"30%",flexShrink:0},labelWithError:{color:theme.label.color.error.foreground,fontWeight:theme.error.font.weight},contextLabelWithError:{color:theme.contextLabel.color.error.foreground,fontWeight:theme.error.font.weight},disabledLabel:{color:theme.label.color.disabled.foreground},labelWithDescription:{paddingBlockEnd:theme.root.layout.paddingBlockEnd.labelWithDescription},labelWithNoDescription:{paddingBlockEnd:theme.root.layout.paddingBlockEnd.labelWithNoDescription},helperTextWithIcon:{flexDirection:"row",gap:theme.helperText.layout.gap},spacingAboveHelperText:{paddingBlockStart:theme.root.layout.spacingBetweenHelperText},spacingBelowHelperText:{paddingBlockEnd:theme.root.layout.spacingBetweenHelperText},helperText:{color:theme.helperText.color.default.foreground,fontSize:theme.helperText.font.size,lineHeight:theme.helperText.font.lineHeight,minInlineSize:sizing.size_0,overflowWrap:"break-word"},disabledHelperText:{color:theme.helperText.color.disabled.foreground},error:{color:semanticColor.core.foreground.critical.default},errorIcon:{marginBlockStart:sizing.size_010},errorMessage:{fontWeight:theme.error.font.weight,marginBlockStart:theme.error.layout.marginBlockStart}});
 
 export { LabeledField };

package/dist/index.js

@@ -41,6 +41,6 @@ const theme$1={root:{layout:{paddingBlockEnd:{labelWithDescription:wonderBlocksT
 
 var theme = wonderBlocksTokens.mapValuesToCssVars(theme$1,"--wb-c-labeled-field-");
 
-const defaultLabeledFieldLabels={errorIconAriaLabel:"Error:"};function LabeledField(props){const{field,styles:stylesProp,label,id,testId,contextLabel,description,errorMessage,readOnlyMessage,additionalHelperMessage,labels=defaultLabeledFieldLabels}=props;const generatedUniqueId=React__namespace.useId();const uniqueId=id??`${generatedUniqueId}-labeled-field`;const labelId=`${uniqueId}-label`;const descriptionId=`${uniqueId}-description`;const fieldId=`${uniqueId}-field`;const errorId=`${uniqueId}-error`;const readOnlyMessageId=`${uniqueId}-read-only-message`;const additionalHelperMessageId=`${uniqueId}-additional-helper-message`;const contextLabelId=`${uniqueId}-context-label`;const hasError=!!errorMessage||!!field.props.error;const isDisabled=!!field.props.disabled;function renderLabelAndContextLabel(){return jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles.labelContainer,children:[jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:[styles.label,hasError?styles.labelWithError:undefined,description?styles.labelWithDescription:styles.labelWithNoDescription,isDisabled&&styles.disabledLabel,stylesProp?.label],tag:"label",htmlFor:fieldId,testId:testId&&`${testId}-label`,id:labelId,weight:"semi",children:label}),contextLabel&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"div",id:contextLabelId,testId:testId&&`${testId}-context-label`,style:[styles.helperText,styles.contextLabel,isDisabled&&styles.disabledHelperText,hasError?styles.contextLabelWithError:undefined,stylesProp?.contextLabel],children:contextLabel})]})}function maybeRenderDescription(){if(!description){return null}return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:[styles.helperText,styles.spacingBelowHelperText,isDisabled&&styles.disabledHelperText,stylesProp?.description],testId:testId&&`${testId}-description`,id:descriptionId,children:description})}function maybeRenderError(){return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.helperTextWithIcon,errorMessage?styles.spacingAboveHelperText:undefined,stylesProp?.error],id:errorId,testId:testId&&`${testId}-error`,"aria-live":"assertive","aria-atomic":"true",children:errorMessage&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(PhosphorIcon,{icon:WarningCircle__default["default"],style:[styles.errorIcon,styles.error],role:"img","aria-label":labels.errorIconAriaLabel}),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:[styles.helperText,styles.errorMessage,styles.error],children:errorMessage})]})})}function renderField(){return React__namespace.cloneElement(field,{id:fieldId,"aria-describedby":[contextLabel&&contextLabelId,description&&descriptionId,additionalHelperMessage&&additionalHelperMessageId,readOnlyMessage&&readOnlyMessageId,errorMessage&&errorId].filter(Boolean).join(" "),error:hasError,testId:testId?`${testId}-field`:undefined,readOnly:!!readOnlyMessage||field.props.readOnly})}function maybeRenderReadOnlyMessage(){if(!readOnlyMessage){return null}return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles.helperTextWithIcon,styles.spacingAboveHelperText,stylesProp?.readOnlyMessage],id:readOnlyMessageId,testId:testId&&`${testId}-read-only-message`,children:[jsxRuntime.jsx(PhosphorIcon,{icon:LockIcon__default["default"],"aria-label":labels.readOnlyIconAriaLabel,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.subtle}),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:styles.helperText,children:readOnlyMessage})]})}function maybeRenderAdditionalHelperMessage(){if(!additionalHelperMessage){return null}return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{id:additionalHelperMessageId,testId:testId&&`${testId}-additional-helper-message`,style:[styles.helperText,styles.spacingAboveHelperText,isDisabled&&styles.disabledHelperText,stylesProp?.additionalHelperMessage],tag:"div",children:additionalHelperMessage})}return jsxRuntime.jsxs(wonderBlocksCore.View,{style:stylesProp?.root,children:[renderLabelAndContextLabel(),maybeRenderDescription(),renderField(),maybeRenderAdditionalHelperMessage(),maybeRenderReadOnlyMessage(),maybeRenderError()]})}const styles=aphrodite.StyleSheet.create({labelContainer:{display:"flex",flexDirection:"row",justifyContent:"space-between",gap:theme.root.layout.spacingBetweenHelperText},label:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,overflowWrap:"break-word",minInlineSize:wonderBlocksTokens.sizing.size_0},contextLabel:{lineHeight:wonderBlocksTokens.font.body.lineHeight.medium,maxInlineSize:"30%",flexShrink:0},labelWithError:{color:theme.label.color.error.foreground,fontWeight:theme.error.font.weight},contextLabelWithError:{color:theme.contextLabel.color.error.foreground,fontWeight:theme.error.font.weight},disabledLabel:{color:theme.label.color.disabled.foreground},labelWithDescription:{paddingBlockEnd:theme.root.layout.paddingBlockEnd.labelWithDescription},labelWithNoDescription:{paddingBlockEnd:theme.root.layout.paddingBlockEnd.labelWithNoDescription},helperTextWithIcon:{flexDirection:"row",gap:theme.helperText.layout.gap},spacingAboveHelperText:{paddingBlockStart:theme.root.layout.spacingBetweenHelperText},spacingBelowHelperText:{paddingBlockEnd:theme.root.layout.spacingBetweenHelperText},helperText:{color:theme.helperText.color.default.foreground,fontSize:theme.helperText.font.size,lineHeight:theme.helperText.font.lineHeight,minInlineSize:wonderBlocksTokens.sizing.size_0,overflowWrap:"break-word"},disabledHelperText:{color:theme.helperText.color.disabled.foreground},error:{color:wonderBlocksTokens.semanticColor.core.foreground.critical.default},errorIcon:{marginBlockStart:wonderBlocksTokens.sizing.size_010},errorMessage:{fontWeight:theme.error.font.weight,marginBlockStart:theme.error.layout.marginBlockStart}});
+const defaultLabeledFieldLabels={errorIconAriaLabel:"Error:"};function LabeledField(props){const{field,styles:stylesProp,label,id,testId,contextLabel,description,errorMessage,readOnlyMessage,additionalHelperMessage,labels=defaultLabeledFieldLabels}=props;const generatedUniqueId=React__namespace.useId();const uniqueId=id??`${generatedUniqueId}-labeled-field`;const labelId=`${uniqueId}-label`;const descriptionId=`${uniqueId}-description`;const fieldId=`${uniqueId}-field`;const errorId=`${uniqueId}-error`;const readOnlyMessageId=`${uniqueId}-read-only-message`;const additionalHelperMessageId=`${uniqueId}-additional-helper-message`;const contextLabelId=`${uniqueId}-context-label`;const hasError=!!errorMessage||!!field.props.error;const isDisabled=!!field.props.disabled;function renderLabelAndContextLabel(){return jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles.labelContainer,children:[jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:[styles.label,hasError?styles.labelWithError:undefined,description?styles.labelWithDescription:styles.labelWithNoDescription,isDisabled&&styles.disabledLabel,stylesProp?.label],tag:"label",htmlFor:fieldId,testId:testId&&`${testId}-label`,id:labelId,weight:"semi",children:label}),contextLabel&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"div",id:contextLabelId,testId:testId&&`${testId}-context-label`,style:[styles.helperText,styles.contextLabel,isDisabled&&styles.disabledHelperText,hasError?styles.contextLabelWithError:undefined,stylesProp?.contextLabel],children:contextLabel})]})}function maybeRenderDescription(){if(!description){return null}return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:[styles.helperText,styles.spacingBelowHelperText,isDisabled&&styles.disabledHelperText,stylesProp?.description],testId:testId&&`${testId}-description`,id:descriptionId,children:description})}function maybeRenderError(){return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.helperTextWithIcon,errorMessage?styles.spacingAboveHelperText:undefined,stylesProp?.error],id:errorId,testId:testId&&`${testId}-error`,"aria-live":"assertive","aria-atomic":"true",children:errorMessage&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(PhosphorIcon,{icon:WarningCircle__default["default"],style:[styles.errorIcon,styles.error],role:"img","aria-label":labels.errorIconAriaLabel}),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:[styles.helperText,styles.errorMessage,styles.error],children:errorMessage})]})})}function renderField(){return React__namespace.cloneElement(field,{id:fieldId,"aria-describedby":[contextLabel&&contextLabelId,description&&descriptionId,additionalHelperMessage&&additionalHelperMessageId,readOnlyMessage&&readOnlyMessageId,errorMessage&&errorId].filter(Boolean).join(" "),error:hasError,testId:testId?`${testId}-field`:undefined,readOnly:!!readOnlyMessage||field.props.readOnly})}function maybeRenderReadOnlyMessage(){if(!readOnlyMessage){return null}return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles.helperTextWithIcon,styles.spacingAboveHelperText,stylesProp?.readOnlyMessage],id:readOnlyMessageId,testId:testId&&`${testId}-read-only-message`,children:[jsxRuntime.jsx(PhosphorIcon,{icon:LockIcon__default["default"],"aria-label":labels.readOnlyIconAriaLabel,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.subtle}),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:styles.helperText,children:readOnlyMessage})]})}function maybeRenderAdditionalHelperMessage(){if(!additionalHelperMessage){return null}return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{id:additionalHelperMessageId,testId:testId&&`${testId}-additional-helper-message`,style:[styles.helperText,styles.spacingAboveHelperText,isDisabled&&styles.disabledHelperText,stylesProp?.additionalHelperMessage],tag:"div",children:additionalHelperMessage})}return jsxRuntime.jsxs(wonderBlocksCore.View,{style:stylesProp?.root,testId:testId,id:uniqueId,children:[renderLabelAndContextLabel(),maybeRenderDescription(),renderField(),maybeRenderAdditionalHelperMessage(),maybeRenderReadOnlyMessage(),maybeRenderError()]})}const styles=aphrodite.StyleSheet.create({labelContainer:{display:"flex",flexDirection:"row",justifyContent:"space-between",gap:theme.root.layout.spacingBetweenHelperText},label:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,overflowWrap:"break-word",minInlineSize:wonderBlocksTokens.sizing.size_0},contextLabel:{lineHeight:wonderBlocksTokens.font.body.lineHeight.medium,maxInlineSize:"30%",flexShrink:0},labelWithError:{color:theme.label.color.error.foreground,fontWeight:theme.error.font.weight},contextLabelWithError:{color:theme.contextLabel.color.error.foreground,fontWeight:theme.error.font.weight},disabledLabel:{color:theme.label.color.disabled.foreground},labelWithDescription:{paddingBlockEnd:theme.root.layout.paddingBlockEnd.labelWithDescription},labelWithNoDescription:{paddingBlockEnd:theme.root.layout.paddingBlockEnd.labelWithNoDescription},helperTextWithIcon:{flexDirection:"row",gap:theme.helperText.layout.gap},spacingAboveHelperText:{paddingBlockStart:theme.root.layout.spacingBetweenHelperText},spacingBelowHelperText:{paddingBlockEnd:theme.root.layout.spacingBetweenHelperText},helperText:{color:theme.helperText.color.default.foreground,fontSize:theme.helperText.font.size,lineHeight:theme.helperText.font.lineHeight,minInlineSize:wonderBlocksTokens.sizing.size_0,overflowWrap:"break-word"},disabledHelperText:{color:theme.helperText.color.disabled.foreground},error:{color:wonderBlocksTokens.semanticColor.core.foreground.critical.default},errorIcon:{marginBlockStart:wonderBlocksTokens.sizing.size_010},errorMessage:{fontWeight:theme.error.font.weight,marginBlockStart:theme.error.layout.marginBlockStart}});
 
 exports.LabeledField = LabeledField;

package/package.json

@@ -3,7 +3,7 @@
   "description": "LabeledField handles accessibility and layout for associating labels with form components.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "4.1.10",
+  "version": "4.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -29,9 +29,9 @@
   },
   "dependencies": {
     "@khanacademy/wonder-blocks-core": "12.5.0",
-    "@khanacademy/wonder-blocks-layout": "3.1.61",
-    "@khanacademy/wonder-blocks-tokens": "17.3.0",
-    "@khanacademy/wonder-blocks-typography": "5.0.4"
+    "@khanacademy/wonder-blocks-layout": "3.1.62",
+    "@khanacademy/wonder-blocks-tokens": "18.0.0",
+    "@khanacademy/wonder-blocks-typography": "5.0.5"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",