@khanacademy/wonder-blocks-form 7.1.15 → 7.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,36 @@
1
1
  # @khanacademy/wonder-blocks-form
2
2
 
3
+ ## 7.1.17
4
+
5
+ ### Patch Changes
6
+
7
+ - 7abcccf: Replace call sites to use `core.background` instead of `action`.
8
+ - Updated dependencies [b1ee2b4]
9
+ - Updated dependencies [7abcccf]
10
+ - Updated dependencies [9bacc1a]
11
+ - Updated dependencies [9bacc1a]
12
+ - Updated dependencies [7abcccf]
13
+ - Updated dependencies [1c3c335]
14
+ - Updated dependencies [689f5d3]
15
+ - Updated dependencies [7d2a646]
16
+ - @khanacademy/wonder-blocks-tokens@10.4.0
17
+ - @khanacademy/wonder-blocks-clickable@7.1.5
18
+ - @khanacademy/wonder-blocks-typography@4.1.0
19
+ - @khanacademy/wonder-blocks-layout@3.1.16
20
+
21
+ ## 7.1.16
22
+
23
+ ### Patch Changes
24
+
25
+ - Updated dependencies [dd76e7c]
26
+ - Updated dependencies [dd76e7c]
27
+ - @khanacademy/wonder-blocks-typography@4.0.0
28
+ - @khanacademy/wonder-blocks-tokens@10.3.0
29
+ - @khanacademy/wonder-blocks-clickable@7.1.4
30
+ - @khanacademy/wonder-blocks-core@12.3.0
31
+ - @khanacademy/wonder-blocks-icon@5.1.4
32
+ - @khanacademy/wonder-blocks-layout@3.1.15
33
+
3
34
  ## 7.1.15
4
35
 
5
36
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -12,7 +12,7 @@ import minusIcon from '@phosphor-icons/core/bold/minus-bold.svg';
12
12
 
13
13
  function mapCheckedToAriaChecked(value){switch(value){case true:return "true";case false:return "false";default:return "mixed"}}const size$1=spacing.medium_16;const checkSize=spacing.small_12;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);const defaultStyle=[sharedStyles$1.inputReset,sharedStyles$1.default,!disabled&&stateStyles.default,disabled&&sharedStyles$1.disabled];const checkboxIcon=jsx(PhosphorIcon,{color:disabled?semanticColor.icon.disabled:semanticColor.icon.inverse,icon:checked?checkIcon:minusIcon,size:"small",style:[sharedStyles$1.checkboxIcon,{width:checkSize,height:checkSize}]});const ariaChecked=mapCheckedToAriaChecked(checked);return jsxs(React.Fragment,{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({inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:size$1,width:size$1,minHeight:size$1,minWidth:size$1,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:border.width.thin,borderRadius:3},disabled:{cursor:"auto",backgroundColor:semanticColor.input.disabled.background,borderColor:semanticColor.input.disabled.border,borderWidth:border.width.thin},checkboxIcon:{position:"absolute",pointerEvents:"none",margin:(size$1-checkSize)/2}});const styles$6={};const _generateStyles$1=(checked,error)=>{const styleKey=`${String(checked)}-${String(error)}`;if(styles$6[styleKey]){return styles$6[styleKey]}const isCheckedOrIndeterminate=checked||checked==null;const actionType=error?"destructive":"progressive";const styleType=isCheckedOrIndeterminate?"primary":"secondary";const colorAction=semanticColor.action[styleType][actionType];const states={default:{border:colorAction.default.border,background:colorAction.default.background},error:{border:semanticColor.input.error.border,background:semanticColor.input.error.background}};let newStyles={};if(isCheckedOrIndeterminate){newStyles={default:{backgroundColor:states.default.background,borderColor:states.default.border,":focus-visible":{outline:`${border.width.medium} solid ${semanticColor.focus.outer}`,outlineOffset:1},":hover":{outline:`${border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:1},":active":{outline:`${border.width.medium} solid ${colorAction.press.border}`,outlineOffset:1,background:colorAction.press.background}}};}else {const currentState=error?states.error:states.default;newStyles={default:{backgroundColor:currentState.background,borderColor:currentState.border,":focus-visible":{backgroundColor:error?semanticColor.input.error.background:colorAction.hover.background,outline:`${border.width.medium} solid ${semanticColor.focus.outer}`,outlineOffset:-1},":hover":{backgroundColor:error?semanticColor.input.error.background:colorAction.hover.background,outline:`${border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:-1},":active":{backgroundColor:colorAction.press.background,outline:`${border.width.medium} solid ${colorAction.press.border}`,outlineOffset:-1}}};}styles$6[styleKey]=StyleSheet.create(newStyles);return styles$6[styleKey]};
14
14
 
15
- const StyledInput$1=addStyle("input");const RadioCore=React.forwardRef(function RadioCore(props,ref){const handleChange=()=>{return};const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const stateStyles=_generateStyles(checked,error);const defaultStyle=[sharedStyles.inputReset,sharedStyles.default,!disabled&&stateStyles.default,disabled&&sharedStyles.disabled];return jsxs(React.Fragment,{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:ref}),disabled&&checked&&jsx("span",{style:disabledChecked})]})});const size=16;const disabledChecked={position:"absolute",top:size/4,left:size/4,height:size/2,width:size/2,borderRadius:border.radius.radius_full,backgroundColor:semanticColor.action.primary.disabled.background};const sharedStyles=StyleSheet.create({inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:size,width:size,minHeight:size,minWidth:size,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:border.width.thin,borderRadius:border.radius.radius_full},disabled:{cursor:"auto",backgroundColor:semanticColor.input.disabled.background,borderColor:semanticColor.input.disabled.border,borderWidth:border.width.thin}});const styles$5={};const _generateStyles=(checked,error)=>{const styleKey=`${String(checked)}-${String(error)}`;if(styles$5[styleKey]){return styles$5[styleKey]}const actionType=error?"destructive":"progressive";const colorAction=semanticColor.action.secondary[actionType];const states={unchecked:{border:semanticColor.input.default.border,background:colorAction.default.background},checked:{border:colorAction.default.foreground,background:colorAction.default.background},error:{border:semanticColor.input.error.border,background:semanticColor.input.error.background}};let newStyles={};if(checked){newStyles={default:{backgroundColor:states.checked.background,borderColor:states.checked.border,borderWidth:size/4,":focus-visible":{outline:`${border.width.medium} solid ${semanticColor.focus.outer}`,outlineOffset:1},":hover":{outline:`${border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:1},":active":{outline:`${border.width.medium} solid ${colorAction.press.border}`,outlineOffset:1,borderColor:colorAction.press.border}}};}else {const currentState=error?states.error:states.unchecked;newStyles={default:{backgroundColor:currentState.background,borderColor:currentState.border,":focus-visible":{backgroundColor:error?states.error.background:colorAction.hover.background,outline:`${border.width.medium} solid ${semanticColor.focus.outer}`,outlineOffset:-1},":hover":{backgroundColor:error?states.error.background:colorAction.hover.background,outline:`${border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:-1},":active":{backgroundColor:colorAction.press.background,outline:`${border.width.medium} solid ${colorAction.press.border}`,outlineOffset:-1}}};}styles$5[styleKey]=StyleSheet.create(newStyles);return styles$5[styleKey]};
15
+ const StyledInput$1=addStyle("input");const RadioCore=React.forwardRef(function RadioCore(props,ref){const handleChange=()=>{return};const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const stateStyles=_generateStyles(checked,error);const defaultStyle=[sharedStyles.inputReset,sharedStyles.default,!disabled&&stateStyles.default,disabled&&sharedStyles.disabled];return jsxs(React.Fragment,{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:ref}),disabled&&checked&&jsx("span",{style:disabledChecked})]})});const size=16;const disabledChecked={position:"absolute",top:size/4,left:size/4,height:size/2,width:size/2,borderRadius:border.radius.radius_full,backgroundColor:semanticColor.core.border.disabled.strong};const sharedStyles=StyleSheet.create({inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:size,width:size,minHeight:size,minWidth:size,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:border.width.thin,borderRadius:border.radius.radius_full},disabled:{cursor:"auto",backgroundColor:semanticColor.input.disabled.background,borderColor:semanticColor.input.disabled.border,borderWidth:border.width.thin}});const styles$5={};const _generateStyles=(checked,error)=>{const styleKey=`${String(checked)}-${String(error)}`;if(styles$5[styleKey]){return styles$5[styleKey]}const actionType=error?"destructive":"progressive";const colorAction=semanticColor.action.secondary[actionType];const coreType=error?"critical":"instructive";const colorCore=semanticColor.core.background[coreType];const states={unchecked:{border:semanticColor.input.default.border,background:colorCore.subtle},checked:{border:colorAction.default.foreground,background:colorCore.subtle},error:{border:semanticColor.input.error.border,background:semanticColor.input.error.background}};let newStyles={};if(checked){newStyles={default:{backgroundColor:states.checked.background,borderColor:states.checked.border,borderWidth:size/4,":focus-visible":{outline:`${border.width.medium} solid ${semanticColor.focus.outer}`,outlineOffset:1},":hover":{outline:`${border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:1},":active":{outline:`${border.width.medium} solid ${colorAction.press.border}`,outlineOffset:1,borderColor:colorAction.press.border}}};}else {const currentState=error?states.error:states.unchecked;newStyles={default:{backgroundColor:currentState.background,borderColor:currentState.border,":focus-visible":{backgroundColor:error?states.error.background:colorAction.hover.background,outline:`${border.width.medium} solid ${semanticColor.focus.outer}`,outlineOffset:-1},":hover":{backgroundColor:error?states.error.background:colorAction.hover.background,outline:`${border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:-1},":active":{backgroundColor:colorAction.press.background,outline:`${border.width.medium} solid ${colorAction.press.border}`,outlineOffset:-1}}};}styles$5[styleKey]=StyleSheet.create(newStyles);return styles$5[styleKey]};
16
16
 
17
17
  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(LabelMedium,{style:[styles$4.label,disabled&&styles$4.disabledLabel],children:jsx("label",{htmlFor:id,children:label})})};const getDescription=id=>{return jsx(LabelSmall,{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(ChoiceCore,{...coreProps,id:uniqueId,checked:checked,"aria-describedby":descriptionId,onClick:handleClick,disabled:disabled,error:error,ref:ref}),jsx(Strut,{size:spacing.xSmall_8}),label&&getLabel(uniqueId)]}),description&&getDescription(descriptionId)]})}})});const styles$4=StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"flex-start",outline:"none"},label:{marginTop:-2},disabledLabel:{color:semanticColor.action.secondary.disabled.foreground},description:{marginLeft:spacing.medium_16+spacing.xSmall_8,marginTop:spacing.xxxSmall_4,color:semanticColor.text.secondary}});
18
18
 
package/dist/index.js CHANGED
@@ -39,7 +39,7 @@ var minusIcon__default = /*#__PURE__*/_interopDefaultLegacy(minusIcon);
39
39
 
40
40
  function mapCheckedToAriaChecked(value){switch(value){case true:return "true";case false:return "false";default:return "mixed"}}const size$1=wonderBlocksTokens.spacing.medium_16;const checkSize=wonderBlocksTokens.spacing.small_12;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);const defaultStyle=[sharedStyles$1.inputReset,sharedStyles$1.default,!disabled&&stateStyles.default,disabled&&sharedStyles$1.disabled];const checkboxIcon=jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{color:disabled?wonderBlocksTokens.semanticColor.icon.disabled:wonderBlocksTokens.semanticColor.icon.inverse,icon:checked?checkIcon__default["default"]:minusIcon__default["default"],size:"small",style:[sharedStyles$1.checkboxIcon,{width:checkSize,height:checkSize}]});const ariaChecked=mapCheckedToAriaChecked(checked);return jsxRuntime.jsxs(React__namespace.Fragment,{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({inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:size$1,width:size$1,minHeight:size$1,minWidth:size$1,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:wonderBlocksTokens.border.width.thin,borderRadius:3},disabled:{cursor:"auto",backgroundColor:wonderBlocksTokens.semanticColor.input.disabled.background,borderColor:wonderBlocksTokens.semanticColor.input.disabled.border,borderWidth:wonderBlocksTokens.border.width.thin},checkboxIcon:{position:"absolute",pointerEvents:"none",margin:(size$1-checkSize)/2}});const styles$6={};const _generateStyles$1=(checked,error)=>{const styleKey=`${String(checked)}-${String(error)}`;if(styles$6[styleKey]){return styles$6[styleKey]}const isCheckedOrIndeterminate=checked||checked==null;const actionType=error?"destructive":"progressive";const styleType=isCheckedOrIndeterminate?"primary":"secondary";const colorAction=wonderBlocksTokens.semanticColor.action[styleType][actionType];const states={default:{border:colorAction.default.border,background:colorAction.default.background},error:{border:wonderBlocksTokens.semanticColor.input.error.border,background:wonderBlocksTokens.semanticColor.input.error.background}};let newStyles={};if(isCheckedOrIndeterminate){newStyles={default:{backgroundColor:states.default.background,borderColor:states.default.border,":focus-visible":{outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:1},":hover":{outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:1},":active":{outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,outlineOffset:1,background:colorAction.press.background}}};}else {const currentState=error?states.error:states.default;newStyles={default:{backgroundColor:currentState.background,borderColor:currentState.border,":focus-visible":{backgroundColor:error?wonderBlocksTokens.semanticColor.input.error.background:colorAction.hover.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-1},":hover":{backgroundColor:error?wonderBlocksTokens.semanticColor.input.error.background:colorAction.hover.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:-1},":active":{backgroundColor:colorAction.press.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,outlineOffset:-1}}};}styles$6[styleKey]=aphrodite.StyleSheet.create(newStyles);return styles$6[styleKey]};
41
41
 
42
- const StyledInput$1=wonderBlocksCore.addStyle("input");const RadioCore=React__namespace.forwardRef(function RadioCore(props,ref){const handleChange=()=>{return};const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const stateStyles=_generateStyles(checked,error);const defaultStyle=[sharedStyles.inputReset,sharedStyles.default,!disabled&&stateStyles.default,disabled&&sharedStyles.disabled];return jsxRuntime.jsxs(React__namespace.Fragment,{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:ref}),disabled&&checked&&jsxRuntime.jsx("span",{style:disabledChecked})]})});const size=16;const disabledChecked={position:"absolute",top:size/4,left:size/4,height:size/2,width:size/2,borderRadius:wonderBlocksTokens.border.radius.radius_full,backgroundColor:wonderBlocksTokens.semanticColor.action.primary.disabled.background};const sharedStyles=aphrodite.StyleSheet.create({inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:size,width:size,minHeight:size,minWidth:size,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:wonderBlocksTokens.border.width.thin,borderRadius:wonderBlocksTokens.border.radius.radius_full},disabled:{cursor:"auto",backgroundColor:wonderBlocksTokens.semanticColor.input.disabled.background,borderColor:wonderBlocksTokens.semanticColor.input.disabled.border,borderWidth:wonderBlocksTokens.border.width.thin}});const styles$5={};const _generateStyles=(checked,error)=>{const styleKey=`${String(checked)}-${String(error)}`;if(styles$5[styleKey]){return styles$5[styleKey]}const actionType=error?"destructive":"progressive";const colorAction=wonderBlocksTokens.semanticColor.action.secondary[actionType];const states={unchecked:{border:wonderBlocksTokens.semanticColor.input.default.border,background:colorAction.default.background},checked:{border:colorAction.default.foreground,background:colorAction.default.background},error:{border:wonderBlocksTokens.semanticColor.input.error.border,background:wonderBlocksTokens.semanticColor.input.error.background}};let newStyles={};if(checked){newStyles={default:{backgroundColor:states.checked.background,borderColor:states.checked.border,borderWidth:size/4,":focus-visible":{outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:1},":hover":{outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:1},":active":{outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,outlineOffset:1,borderColor:colorAction.press.border}}};}else {const currentState=error?states.error:states.unchecked;newStyles={default:{backgroundColor:currentState.background,borderColor:currentState.border,":focus-visible":{backgroundColor:error?states.error.background:colorAction.hover.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-1},":hover":{backgroundColor:error?states.error.background:colorAction.hover.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:-1},":active":{backgroundColor:colorAction.press.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,outlineOffset:-1}}};}styles$5[styleKey]=aphrodite.StyleSheet.create(newStyles);return styles$5[styleKey]};
42
+ const StyledInput$1=wonderBlocksCore.addStyle("input");const RadioCore=React__namespace.forwardRef(function RadioCore(props,ref){const handleChange=()=>{return};const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const stateStyles=_generateStyles(checked,error);const defaultStyle=[sharedStyles.inputReset,sharedStyles.default,!disabled&&stateStyles.default,disabled&&sharedStyles.disabled];return jsxRuntime.jsxs(React__namespace.Fragment,{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:ref}),disabled&&checked&&jsxRuntime.jsx("span",{style:disabledChecked})]})});const size=16;const disabledChecked={position:"absolute",top:size/4,left:size/4,height:size/2,width:size/2,borderRadius:wonderBlocksTokens.border.radius.radius_full,backgroundColor:wonderBlocksTokens.semanticColor.core.border.disabled.strong};const sharedStyles=aphrodite.StyleSheet.create({inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:size,width:size,minHeight:size,minWidth:size,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:wonderBlocksTokens.border.width.thin,borderRadius:wonderBlocksTokens.border.radius.radius_full},disabled:{cursor:"auto",backgroundColor:wonderBlocksTokens.semanticColor.input.disabled.background,borderColor:wonderBlocksTokens.semanticColor.input.disabled.border,borderWidth:wonderBlocksTokens.border.width.thin}});const styles$5={};const _generateStyles=(checked,error)=>{const styleKey=`${String(checked)}-${String(error)}`;if(styles$5[styleKey]){return styles$5[styleKey]}const actionType=error?"destructive":"progressive";const colorAction=wonderBlocksTokens.semanticColor.action.secondary[actionType];const coreType=error?"critical":"instructive";const colorCore=wonderBlocksTokens.semanticColor.core.background[coreType];const states={unchecked:{border:wonderBlocksTokens.semanticColor.input.default.border,background:colorCore.subtle},checked:{border:colorAction.default.foreground,background:colorCore.subtle},error:{border:wonderBlocksTokens.semanticColor.input.error.border,background:wonderBlocksTokens.semanticColor.input.error.background}};let newStyles={};if(checked){newStyles={default:{backgroundColor:states.checked.background,borderColor:states.checked.border,borderWidth:size/4,":focus-visible":{outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:1},":hover":{outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:1},":active":{outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,outlineOffset:1,borderColor:colorAction.press.border}}};}else {const currentState=error?states.error:states.unchecked;newStyles={default:{backgroundColor:currentState.background,borderColor:currentState.border,":focus-visible":{backgroundColor:error?states.error.background:colorAction.hover.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-1},":hover":{backgroundColor:error?states.error.background:colorAction.hover.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:-1},":active":{backgroundColor:colorAction.press.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,outlineOffset:-1}}};}styles$5[styleKey]=aphrodite.StyleSheet.create(newStyles);return styles$5[styleKey]};
43
43
 
44
44
  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.LabelMedium,{style:[styles$4.label,disabled&&styles$4.disabledLabel],children:jsxRuntime.jsx("label",{htmlFor:id,children:label})})};const getDescription=id=>{return jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{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(ChoiceCore,{...coreProps,id:uniqueId,checked:checked,"aria-describedby":descriptionId,onClick:handleClick,disabled:disabled,error:error,ref:ref}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),label&&getLabel(uniqueId)]}),description&&getDescription(descriptionId)]})}})});const styles$4=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"flex-start",outline:"none"},label:{marginTop:-2},disabledLabel:{color:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground},description:{marginLeft:wonderBlocksTokens.spacing.medium_16+wonderBlocksTokens.spacing.xSmall_8,marginTop:wonderBlocksTokens.spacing.xxxSmall_4,color:wonderBlocksTokens.semanticColor.text.secondary}});
45
45
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-form",
3
- "version": "7.1.15",
3
+ "version": "7.1.17",
4
4
  "design": "v1",
5
5
  "description": "Form components for Wonder Blocks.",
6
6
  "main": "dist/index.js",
@@ -12,12 +12,12 @@
12
12
  "access": "public"
13
13
  },
14
14
  "dependencies": {
15
- "@khanacademy/wonder-blocks-clickable": "7.1.3",
15
+ "@khanacademy/wonder-blocks-clickable": "7.1.5",
16
16
  "@khanacademy/wonder-blocks-core": "12.3.0",
17
17
  "@khanacademy/wonder-blocks-icon": "5.1.4",
18
- "@khanacademy/wonder-blocks-layout": "3.1.14",
19
- "@khanacademy/wonder-blocks-tokens": "10.2.1",
20
- "@khanacademy/wonder-blocks-typography": "3.2.4"
18
+ "@khanacademy/wonder-blocks-layout": "3.1.16",
19
+ "@khanacademy/wonder-blocks-tokens": "10.4.0",
20
+ "@khanacademy/wonder-blocks-typography": "4.1.0"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "@phosphor-icons/core": "^2.0.2",
@@ -25,7 +25,7 @@
25
25
  "react": "18.2.0"
26
26
  },
27
27
  "devDependencies": {
28
- "@khanacademy/wb-dev-build-settings": "3.1.0"
28
+ "@khanacademy/wb-dev-build-settings": "3.2.0"
29
29
  },
30
30
  "scripts": {
31
31
  "test": "echo \"Error: no test specified\" && exit 1"