code: function Checkbox({ children, ...props }) {
    const { getLabelProps, ...fieldCtx } = useFieldContext();
    const { getFocusProps, keyboardFocused } = useKeyboardFocus();
  
    /**
     * Due to us applying keyboard-only focus events to 2 separate elements (the input and label)
     * we must apply the original `onMouseDown` event to the `onMouseUp` event of the label.
     *
     * By passing the original props within `getFocusProps` we are able to allow
     * `event.preventDefault()` to still prevent chained events as expected.
     */
    const { onMouseDown: onFocusMouseDown, ...keyboardFocusedProps } = getFocusProps(props);
  
    const modifiedFieldCtx = {
      getLabelProps: ({ onMouseUp, ...other }) =>
        getLabelProps({ onMouseUp: composeEventHandlers(onMouseUp, onFocusMouseDown), ...other }),
      ...fieldCtx
    };
  
    return (
      <FieldContext.Provider value={modifiedFieldCtx}>
        <CheckboxContext.Provider value={{ isFocused: keyboardFocused }}>
          <StyledCheck>
            <StyledCheckInput
              {...modifiedFieldCtx.getInputProps({
                'data-garden-id': 'forms.checkbox',
                'data-garden-version': PACKAGE_VERSION,
                ...keyboardFocusedProps
              })}
            />
            {children}
          </StyledCheck>
        </CheckboxContext.Provider>
      </FieldContext.Provider>
    );
  }
docs: Accepts all `<input type="checkbox" />` props