@khanacademy/wonder-blocks-form 0.0.0-PR2921-20260109172217 → 0.0.0-PR2929-20260114011701

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,19 +1,16 @@
1
1
  # @khanacademy/wonder-blocks-form
2
2
 
3
- ## 0.0.0-PR2921-20260109172217
4
-
5
- ### Minor Changes
6
-
7
- - 8a3ee1f: Support SYL Dark
3
+ ## 0.0.0-PR2929-20260114011701
8
4
 
9
5
  ### Patch Changes
10
6
 
11
- - Updated dependencies [8a3ee1f]
12
- - @khanacademy/wonder-blocks-typography@0.0.0-PR2921-20260109172217
13
- - @khanacademy/wonder-blocks-tokens@0.0.0-PR2921-20260109172217
14
- - @khanacademy/wonder-blocks-clickable@0.0.0-PR2921-20260109172217
15
- - @khanacademy/wonder-blocks-icon@0.0.0-PR2921-20260109172217
16
- - @khanacademy/wonder-blocks-layout@0.0.0-PR2921-20260109172217
7
+ - Updated dependencies [ef5b4f3]
8
+ - @khanacademy/wonder-blocks-core@0.0.0-PR2929-20260114011701
9
+ - @khanacademy/wonder-blocks-clickable@0.0.0-PR2929-20260114011701
10
+ - @khanacademy/wonder-blocks-icon@0.0.0-PR2929-20260114011701
11
+ - @khanacademy/wonder-blocks-layout@0.0.0-PR2929-20260114011701
12
+ - @khanacademy/wonder-blocks-tokens@14.1.3
13
+ - @khanacademy/wonder-blocks-typography@0.0.0-PR2929-20260114011701
17
14
 
18
15
  ## 7.5.1
19
16
 
package/dist/css/vars.css CHANGED
@@ -8,16 +8,6 @@
8
8
  --wb-c-form-field-layout-paddingBlock: var(--wb-sizing-size_100);
9
9
  --wb-c-form-field-layout-paddingInline: var(--wb-sizing-size_160);}
10
10
 
11
- [data-wb-theme='syl-dark'] {--wb-c-form-choice-inputWrapper-layout-padding: var(--wb-sizing-size_040);
12
- --wb-c-form-choice-inputWrapper-layout-margin: calc(var(--wb-sizing-size_040) * -1);
13
- --wb-c-form-description-color-foreground: var(--wb-semanticColor-core-foreground-neutral-subtle);
14
- --wb-c-form-field-border-radius: var(--wb-border-radius-radius_080);
15
- --wb-c-form-field-border-width-error: var(--wb-border-width-medium);
16
- --wb-c-form-field-border-width-press: var(--wb-border-width-thin);
17
- --wb-c-form-field-sizing-height: var(--wb-sizing-size_440);
18
- --wb-c-form-field-layout-paddingBlock: var(--wb-sizing-size_100);
19
- --wb-c-form-field-layout-paddingInline: var(--wb-sizing-size_120);}
20
-
21
11
  [data-wb-theme='thunderblocks'] {--wb-c-form-choice-inputWrapper-layout-padding: var(--wb-sizing-size_040);
22
12
  --wb-c-form-choice-inputWrapper-layout-margin: calc(var(--wb-sizing-size_040) * -1);
23
13
  --wb-c-form-description-color-foreground: var(--wb-semanticColor-core-foreground-neutral-subtle);
package/dist/es/index.js CHANGED
@@ -15,7 +15,7 @@ var themeDefault = {choice:{inputWrapper:{layout:{padding:sizing.size_0,margin:s
15
15
 
16
16
  var theme = mapValuesToCssVars(themeDefault,"--wb-c-form-");
17
17
 
18
- 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.disabled.default}}};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}}}}};
18
+ 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}}}}};
19
19
 
20
20
  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]};
21
21
 
package/dist/index.js CHANGED
@@ -42,7 +42,7 @@ var themeDefault = {choice:{inputWrapper:{layout:{padding:wonderBlocksTokens.siz
42
42
 
43
43
  var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-form-");
44
44
 
45
- 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.disabled.default}}};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}}}}};
45
+ 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}}}}};
46
46
 
47
47
  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]};
48
48
 
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Form components for Wonder Blocks.",
4
4
  "author": "Khan Academy",
5
5
  "license": "MIT",
6
- "version": "0.0.0-PR2921-20260109172217",
6
+ "version": "0.0.0-PR2929-20260114011701",
7
7
  "publishConfig": {
8
8
  "access": "public"
9
9
  },
@@ -28,12 +28,12 @@
28
28
  "./styles.css": "./dist/css/vars.css"
29
29
  },
30
30
  "dependencies": {
31
- "@khanacademy/wonder-blocks-clickable": "0.0.0-PR2921-20260109172217",
32
- "@khanacademy/wonder-blocks-core": "12.4.2",
33
- "@khanacademy/wonder-blocks-icon": "0.0.0-PR2921-20260109172217",
34
- "@khanacademy/wonder-blocks-layout": "0.0.0-PR2921-20260109172217",
35
- "@khanacademy/wonder-blocks-tokens": "0.0.0-PR2921-20260109172217",
36
- "@khanacademy/wonder-blocks-typography": "0.0.0-PR2921-20260109172217"
31
+ "@khanacademy/wonder-blocks-clickable": "0.0.0-PR2929-20260114011701",
32
+ "@khanacademy/wonder-blocks-core": "0.0.0-PR2929-20260114011701",
33
+ "@khanacademy/wonder-blocks-icon": "0.0.0-PR2929-20260114011701",
34
+ "@khanacademy/wonder-blocks-layout": "0.0.0-PR2929-20260114011701",
35
+ "@khanacademy/wonder-blocks-tokens": "14.1.3",
36
+ "@khanacademy/wonder-blocks-typography": "0.0.0-PR2929-20260114011701"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "@phosphor-icons/core": "^2.0.2",
@@ -41,7 +41,7 @@
41
41
  "react": "18.2.0"
42
42
  },
43
43
  "devDependencies": {
44
- "@khanacademy/wb-dev-build-settings": "3.2.0"
44
+ "@khanacademy/wb-dev-build-settings": "0.0.0-PR2929-20260114011701"
45
45
  },
46
46
  "scripts": {
47
47
  "build:css": "pnpm exec wonder-blocks-tokens .",
@@ -1,32 +0,0 @@
1
- declare const _default: {
2
- choice: {
3
- inputWrapper: {
4
- layout: {
5
- padding: string;
6
- margin: string;
7
- };
8
- };
9
- };
10
- description: {
11
- color: {
12
- foreground: string;
13
- };
14
- };
15
- field: {
16
- border: {
17
- radius: string;
18
- width: {
19
- error: string;
20
- press: string;
21
- };
22
- };
23
- sizing: {
24
- height: string;
25
- };
26
- layout: {
27
- paddingBlock: string;
28
- paddingInline: string;
29
- };
30
- };
31
- };
32
- export default _default;